邊欄和內容但沒有內容隱藏在邊欄內容下

我希望我的頁面上有一個邊欄和一個頁面內容區域，邊欄是固定的，您可以滾動頁面內容。我明白了。我沒有得到的是側邊欄div是獨立的，並有它自己的屬性，而不是簡單地顯示在頁面內容上方的側邊欄div。更多的信息只是讓我知道。我可能錯過了一些非常基本的東西。邊欄和內容但沒有內容隱藏在邊欄內容下

我有一個側邊欄DIV：

<div id="sidebar"> 
     <a href="index.html"><img src="images/logo/mdLogo.png"></a> 
     <nav> 
      <ul> 
       <li><a href="index.html">HOME</a></li> 
       <li><a href="#">PHOTOGRAPHY</a></li> 
       <li><a href="#">GRAPHIC DESIGN</a></li> 
       <li><a href="#">3D MODELLING</a></li> 
      </ul> 
     </nav> 
</div>

，我有我的內容的div：

<div id="pageContent"> 
     <!-- Parallax --> 
     <div class="parallaxImage1"></div> 

     <div class="parallaxContent"> 
      <h1>A little about me...</h1> 
      <p>Information goes here.</p> 
     </div> 

     <div class="parallaxImage1"></div> 
    </div>

，我有相關的CSS：

/* Sidebar */ 
#sidebar { 
    background-color: #ffffff; 
    width: 405px; 
    height: 100%; 
    padding: 10px; 
    float: left; 
    position: fixed; 
    z-index: 1; 
} 

/* Page Content */ 
#pageContent { 
    display: block; 
    height: 100%; 
    width: 100%; 
    background-color: #212121; 
    position: absolute; 
}

的事情是，在頁面內容填充頁面的100％，這是我想要的，（如果我刪除側邊欄，我仍然有一個頁面內容填補了entir e網頁，我實際上只想填充75％的網頁，以符合邊欄的邊緣。如果我將其設置爲100％，則會填充整個網頁而不是頁面內容div。如果我沒有將100％寬度的#pageContent放在內容中，我必須確保有足夠的內容才能使div在頁面的其餘部分伸出，否則它只有幾個像素寬（換句話說，寬度完全取決於它內部的內容，而不是一個固定的大小）。我還希望使用百分比，因爲此網頁將作爲響應，並將調整爲瀏覽器的大小。

謝謝！

來源

2017-08-03 Macast

我想我已經明白你想要什麼，如果我有，那麼這應該是您的修復：

/* Sidebar */ 
#sidebar { 
    background-color: #ffffff; 
    width: 25%; 
    height: 100%; 
    padding: 10px; 
    float: left; 
    position: fixed; 
    z-index: 1; 
} 

/* Page Content */ 
#pageContent { 
    display: block; 
    height: 100%; 
    width: 75%; 
    left: 25%; 
    background-color: #212121; 
    position: absolute; 
}

這會讓你的側邊欄佔用頁面的25％，內容佔75 ％。我們必須添加left: 25%才能正確設置內容分隔位置。

來源

2017-08-03 17:48:24 CaptainAmericaIRL

邊欄和內容但沒有內容隱藏在邊欄內容下

回答

相關問題