如何在網站上只有內容做scroll而不會與header重疊?

css html

nick12345 2021-11-11 18:51:55 ‧ 976 瀏覽

分享至

header是透明，而內容做滾動是不會與header重疊。
如果我把header變透明，內容向下拉時，會跟header重疊，請問如何解決

看更多先前的討論...收起先前的討論...

Hans5300609 iT邦研究生 4 級 ‧ 2021-11-11 23:31:15 檢舉

比較好奇為何要透明?
不透明不行嗎?

nick12345 iT邦新手 4 級 ‧ 2021-11-12 13:05:22 檢舉

工作不能問為什麼...

Mao iT邦研究生 5 級 ‧ 2021-11-12 22:49:32 檢舉

不知道這樣有沒有達到你期望的效果

nick12345 iT邦新手 4 級 ‧ 2021-11-14 18:37:54 檢舉

好似可以了，謝謝你

nick12345 iT邦新手 4 級 ‧ 2021-11-15 07:38:48 檢舉

可以知道.wrap 是哪個HTML嗎

Mao iT邦研究生 5 級 ‧ 2021-11-15 14:27:57 檢舉

.weap 可以放在 div 的 class 把其他內容放在裡面

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Mao

iT邦研究生 5 級 ‧ 2021-11-11 20:12:17

最佳解答

可以試試看在 body 標籤與內容做出效果

html, body 
{
  height: 100%;
  overflow-y: hidden;
}
.header
{
  height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.wrap 
{
  height: calc(100% - 56px); /* 56 px 是 header 的高度 */
  margin-top: 56px; /* 56 px 是 header 的高度 */
  overflow: auto;
}

初學 HTML 與 CSS 的作品 Demo

回應
分享
檢舉

登入發表回應

greenriver

iT邦研究生 4 級 ‧ 2021-11-15 13:05:00

在nav跟內容中間，加入一個空白的div就好了，高度跟nav一致。

<style>
    .navBlock{
        width:100%;
        height:54px;
    }
</style>

<body>
    <nav></nav>
    <div class="navBlock"></div>
    <div class="container"></div>
</body>