iT邦幫忙

0

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

  • 分享至 

  • xImage

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

https://ithelp.ithome.com.tw/upload/images/20211111/2013514112oD3WHvne.jpg

看更多先前的討論...收起先前的討論...
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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
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

0
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>

我要發表回答

立即登入回答