Twitter Bootstrap邊欄擴展到底部

我使用twitter引導，在閱讀堆棧溢出的所有答案以將底部div擴展到底部後，我想出了這個代碼給我的邊欄。Twitter Bootstrap邊欄擴展到底部

body

<div id="wrapper-sidebar"> 
    <div id="content-sidebar" class="text-center"> 
     <h1> hello</h1> 
     <p>welcome to the admin panel</p> 
     <p>have a nice stay!</p> 
    </div> 
</div>

css

#wrapper-sidebar 
{ 
    margin: 0 auto; 
    width: 300px; 
    height: 100%; 
    padding: 0; 
    position: absolute; 
} 
#content-sidebar 
{ 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    height: 100%; 
    padding-top: 5px; 
} 
.text-center 
{ 
    text-align: center; 
}

現在，這的確讓側邊欄擴展，直到我的網頁的底部，但它也插入一個滾動條，當我向下滾動，我的文字變隔斷。任何幫助，將不勝感激。有誰知道如何使用bootstrap css類來擴展div/sidebar（即height = 100％）？

jfiddle是here但它實際上不顯示文本被切斷，因此我沒有發佈它之前。

來源

2013-07-16 damien hawks

創建一個jsfiddle [here]（http://jsfiddle.net/）並在你的問題中發佈鏈接以獲得準確答案 –

@ Answer_42 jfiddle沒有顯示被截斷的文本，因此沒有發佈它！但已添加。謝謝。 –

如果jsfiddle沒有顯示文字被截斷，請張貼截圖。 –

我相信滾動條是由padding-top和/或border引入的。您可能需要降低高度來解決這些問題。

來源

2015-10-21 23:53:01

Twitter Bootstrap邊欄擴展到底部

回答

相關問題