固定的Topbar和內容分區

Question

我是新來的HTML和CSS，並有一些初學者的麻煩。

我想在頂部有一個固定的導航欄（它是固定的），所以即使用戶滾動頁面，它也會貼在頂部。 及以下是內容頁面。

我希望網頁的行爲是，當用戶滾動頁面的內容頁面應該在導航欄下。

在我的情況下，導航欄是固定的，但滾動時，content div覆蓋導航欄。

我的代碼如下

<div id="Container"> <!--Container Start--> 
     <div id="TopBar"><!--TopBar Start--> 
      <div class="fixedwidth"> <!-- Fixedwidth Start--> 
       <div id="logodiv"> <!-- Logodiv Start--> 
        <img src="images/mascot.jpg"/> 
       </div><!-- Logodiv End--> 
       <div id="signInDiv"> 
        <p><img src="images/orb.png"/>Sign In/Up</p> 
       </div> 
      </div> <!-- Fixedwidth End--> 

     </div><!--TopBar End--> 

     <div class="break"></div> 

     <div id="mainContentDiv"> <!--Main Content Start--> 
      <div class="fixedwidth"> 
       <div id="Content"> 

       </div> 
      </div> 
     </div> <!--Main Content End--> 
    </div><!--Container End--> 

和CSS代碼如下：

body{ 
     margin:0; 
    } 
    #TopBar{ 
     background-color:#FFFFFF; 
     width:100%; 
     height:100px; 
     color:#174269; 
     position:fixed; 

     font-weight:bold; 
     font-size:1.2em; 
     border-bottom:1px ridge black; 
    } 

    .fixedwidth{ 

     width:1050px; 
     margin:0 auto; 

    } 

    #logodiv { 
     float:left; 
     padding-bottom:5px; 

    } 
    #logodiv img{ 
     width:188px; 
     height:100px; 

    } 
    #signInDiv{ 
     float:right 


    } 
    #signInDiv img{ 
     position:relative; 
     top:6px; 

    } 
    #signInDiv p{ 
     position:relative; 
     top:20px; 

    } 
    .break{ 
     clear:both; 
    } 

    #mainContentDiv{ 

     position:relative; 
     top:100px; 
     width:100%; 
     height:1000px; 
     background-color: #0C7ECC; 
    } 

我知道它有一個簡單的解決方案，但只是無法弄清楚。

Answer 1

「break」元素看起來應該被刪除。尋找「clearfix」，這是一種定義應用於第一個浮動元素（TopBar）的類的標準方法。然後，您還可以刪除TopBar上的「高度」。

一個可能更簡單的方法是設置TopBar的已知高度（比如50px），併爲mainContentDiv的margin-top設置相同的值。文本不會在底下（如您所問），但由於您的TopBar不透明，視覺效果應該相同。

另一種可能性是在容器上使用「display：flexbox」，並在mainContentDiv上設置「flex：1」屬性，使其佔用整個高度，除了TopBar所需的高度。在這種情況下，刪除TopBar的硬編碼高度屬性，添加我之前提到的clearfix類，以便TopBar在其元素處具有相同的高度。