固定側欄，可滾動內容

我正在嘗試創建一個網頁，其中會包含固定的側邊欄和可滾動內容。它確實工作，如果我沒有頭div。如果我滾動頁面，我有一些空的空間，以前是一個標題（我用紅色標記）。在滾動標題div後，我希望我的邊欄覆蓋空白區域。固定側欄，可滾動內容

這是我的HTML代碼 - 我該如何解決這個問題？

<!doctype html> 

<head> 
    <link rel="stylesheet" href="style.css"type=" text/css"/> 
</head> 

<body> 
    <div id="page"> 

     <div id="header"> 
     </div> 

     <div id="navigation"> 
      <ul> 
       <li><a href="#home">home</a></li> 
       <li><a href="#news">news</a></li> 
       <li><a href="#contact">contact</a></li> 
       <li><a href="#about">about</a></li> 
      </ul> 
     </div> 

     <div id="content"> 
      <div id="abcd"> 
     </div> 
    </div> 
</body>

CSS

#page 
{ 
    position:relative; 
    width:100%; 
    height:3000px; 

    background-color:yellow; 
} 

#header 
{ 
    background-color: blue; 
    width:100%; 
    height:150px; 
} 

#navigation 
{ 

    background-color: red; 
    width:10%; 
    height:3000px; 
    float:left; 

} 

#content 
{ 
    float:left; 
    background-color: green; 
    width:90%; 
    overflow: auto; 
    height:1000px; 
} 

body 
{ 
    margin: 0; 
} 

ul 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 10%; 
    background-color: #f1f1f1; 
    position: fixed; 
    height: 100%; 
    overflow: auto; 
} 

li a 
{ 
    display: block; 
    color: #000; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
}

來源

2016-03-20 Varhurgh

你必須把你的導航格在最外面的部分，即在主體（未在任何其他分區）。

我測試了這個，現在工作正常。

你的新代碼應該是

<html> 
<head> 
    <link rel="stylesheet" href="style.css" type=" text/css" /> 
</head> 

<body> 
    <div id="navigation"> 
     <ul> 
      <li><a href="#home">home</a></li> 
      <li><a href="#news">news</a></li> 
      <li><a href="#contact">contact</a></li> 
      <li><a href="#about">about</a></li> 
     </ul> 
    </div> 

    <div id="page"> 

     <div id="header"> 

     </div> 
     <div id="content"> 
      <div id="abcd"> 

      </div> 

     </div> 

    </div> 
</body> 
</html>

而且修改後的CSS： -

#page { 
    position: relative; 
    width: 100%; 
    height: 3000px; 
    background-color: yellow; 
} 

#header { 
    background-color: blue; 
    width: 100%; 
    height: 150px; 
    display: block; 
} 

#navigation 
{ 
    background-color: red; 
    width:10%; 
    height:100%; 
    float:left; 
    position: absolute; 
    z-index:1; 
} 

#content { 
    float: left; 
    background-color: green; 
    width: 90%; 
    overflow: auto; 
    height: 1000px; 
} 

body { 
    margin: 0; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 10%; 
    background-color: #f1f1f1; 
    position: fixed; 
    height: 100%; 
    overflow: auto; 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
}

在CSS中我已經改變了導航的高度爲100％，其z指數爲1。

此外，您沒有關閉類「頁面」的div標籤。

參考： - w3 css sidenav

來源

2016-03-20 17:33:20

感謝您的回答！我認爲我的問題不太準確。我希望我的導航欄覆蓋頁面的整個高度（我希望這些列表項目位於頁面的頂部），當滾動標題div時。 – Varhurgh

我已更新我的答案並插入了工作代碼。 –

請試試這個：

#navigation { 
    background-color: red; 
    width: 10%; 
    height: 3000px; 
    float: left; 
    position: absolute; 
    z-index: 99999; 
    left: 0; 
    top: 0; 
}

來源

2016-03-20 17:31:56 satya

感謝您的回答！不幸的是，它涵蓋了我的導航欄，我希望它僅在我看不到標題時覆蓋整個頁面。 – Varhurgh

固定側欄，可滾動內容

回答

相關問題