充分高度側邊欄

我在我的頁面兩個div：leftpart和rightpart它具有以下的css：充分高度側邊欄

.leftpart{ 
     width:280px; 
     background:#0054a6; 
     color:#fff; 
     padding-top:40px; 
     height:100%; 
     min-height:637px; 
     box-shadow:3px 3px 10px #bebebe; 
     position:relative; 
} 
.rightpart{ 
     width:75%; 
     padding-left:10px; 
}

我想這個側邊欄（leftpart），直到我的網頁端（至底部）。我已將高度設置爲100％，但是當我最小化瀏覽器時，它會在條形圖下方顯示空白區域，而不是顯示藍色背景。我的意思是它沒有把它的高度作爲100％。我怎麼弄到的？

來源

2012-07-25 Aneeta Sharma

對於一個完整的側邊欄，你最好的選擇可能是舊的虛擬列方法。你可以在CSS中做到這一點，但這對你來說可能更容易。

把基本上你想要一個圖像與你的列背景在一個細長條。然後，將其作爲背景圖像添加到您的父級div，並用作假裝完整高度的列。

例如。如果你想嘗試這種在CSS，你可以嘗試切緣陰性招http://www.alistapart.com/articles/fauxcolumns/

.container { 
    background: url(your_image) repeat-y left top; 
} 

<div class="container"> 
    <div class="sidebar">SIDEBAR</div> 
    <div class="content">CONTENT</div> 
</div>

你可以閱讀更多關於它在這裏。

您將容器的溢出設置爲隱藏，然後在每個div上添加負邊距底部和相等的正底部填充底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     SIDEBAR 
    </div> 
    <div class="col2"> 
     CONTENT 
    </div> 
</div>

來源

2012-07-25 10:07:11 SpaceBeers

充分高度側邊欄

回答

相關問題