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边栏扩展到底部

回答

相关问题