如何停止div.content與標頭重疊？

Question

 .myHeader{ display: block; position: fixed; height: auto; width: 100%; z-index: 100; } h1 { font-size: 39px; color: rgba(255, 255, 255, 0.842); /* border-bottom: 2px solid #f6f4f84d; */ text-align: center; margin-top: 0; padding: 15px 18px; } ul { list-style-type: none; position: fixed; top: 80px; width: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .content{ display: block; color: white; }

 <body> <header class="myHeader"> <h1>The Foreign Journal</h1> <ul> <li><a href="#intro">Intro</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </header> <div class="content"> something something </div> </body>

我創建了一個帶有類的標頭，用於在頁面頂部修復h1和nav列表。 現在，每次我在其他body div中加載任何內容時，它們都會與第一個div重疊。 有什么建議么？

我試圖將顯示從塊更改為嵌入式塊，但是我現在只是卡住了，似乎無法解決。

<body>
    <header class="myHeader">
        <h1>The Foreign Journal</h1>
        <ul>
          <li><a href="#intro">Intro</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
    </header>
    <div class="content">
     something something
    </div>

then on css 


.myHeader{
    display: block;
    position: fixed;
    height: auto;
    width: 100%;
    z-index: 100;
}    
h1 {
    font-size: 39px;
    color: rgba(255, 255, 255, 0.842);
    /* border-bottom: 2px solid #f6f4f84d; */
    text-align: center;
    margin-top: 0;
    padding: 15px 18px;
  }
  ul {
    list-style-type: none;
    position: fixed;
    top: 80px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }


  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .content{
    display: block;
    color: white;
  }

Answer 1

解決方案1：

為標題設置固定高度，並添加具有相同值的“ body”邊距：

例如：

body {
    margin-top: 200px;
}
.myHeader{
    height: 200px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

解決方案2：
1.從ul選擇器中刪除“位置”和“頂部”屬性。
2.將“頂部”和“左側”屬性添加到“ .myHeader”類。
3.添加一個jQuery腳本來動態設置頁面的上邊距。

<style>
ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.myHeader{
    display: block;
    position: fixed;
    height: auto;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}  
</style>

<script>
    $(document).ready(() => {
        let headerHeight = $('.myHeader').height();
        $('body').css({
            'margin-top': headerHeight + 'px'
        });
    });
</script>

Answer 2

如果您將標題固定在頁面頂部，則標題將與未固定的內容重疊，例如，可以通過為內容設置頂部間隙來避免這種情況。

我將嘗試編寫一段代碼向您展示。

在以下示例中，您將看到div與固定標頭重疊，第二個標頭將保留在其下方，希望對您有所幫助！

在這里，您可以看到您的身體從標頭下方開始，如果您希望標頭始終固定，則很好。

 body{ margin-top: 100px; } header{ width: 75%; background-color: red; position: fixed; top:0; height: 100px; } .firstdiv{ width: 100%; background-color: blue; height: 100px; } .seconddiv{ width: 50%; background-color: yellow; height: 100px; }

 <body> <header>Your header goes here</header> <div class="firstdiv">The rest of your website goes here</div> <div class="seconddiv">The rest of your website goes here</div> </body>

您可以在此處看到，如果將第二個div的位置降低了100px，它將保留在標題的下面，這樣您就可以將內容放在標題下。

 header{ width: 75%; background-color: red; position: fixed; height: 100px; } .seconddiv{ position: relative; top: 100px; width: 50%; background-color: yellow; height: 100px; }

 <body> <header>Your header goes here</header> <div class="seconddiv">The rest of your website goes here</div> </body>

當您不在標題下移動內容時，此片段顯示div與標題重疊

 body{ margin: 0; } header{ width: 75%; background-color: red; position: fixed; top:0; height: 100px; } .firstdiv{ width: 100%; background-color: blue; height: 100px; }

 <body> <header>Your header goes here</header> <div class="firstdiv">The rest of your website goes here</div> </body>

如何停止div.content與標頭重疊？

問題描述

2 個解決方案

解決方案1
1 2019-01-19 14:23:28

解決方案2
0 2019-01-19 14:06:02

如何停止div.content與標頭重疊？

問題描述

2 個解決方案

解決方案1 1 2019-01-19 14:23:28

解決方案2 0 2019-01-19 14:06:02

解決方案1
1 2019-01-19 14:23:28

解決方案2
0 2019-01-19 14:06:02