[英]Twitter Bootstrap sidebar extended to bottom
I am using twitter bootstrap, after reading all the answers on stack overflow to extend a div to the bottom i came up with this code for my sidebar. 我正在使用twitter bootstrap,在阅读堆栈溢出的所有答案后将div扩展到底部我想出了我的侧边栏的代码。
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;
}
Now this did make the sidebar extend till the bottom of my page but it also inserted a scroll-bar, and when i scroll down my text gets cut off. 现在这确实使侧边栏延伸到我的页面底部,但它也插入了一个滚动条,当我向下滚动时,我的文字被切断了。 Any help would be appreciated. 任何帮助,将不胜感激。 Does anyone know how to extend a div/sidebar (ie, height=100%) using bootstrap css classes only? 有没有人知道如何使用bootstrap css类扩展div / sidebar(即height = 100%)?
jfiddle is here but it actually doesn't show the text being cut off thus i did not post it before. jfiddle在这里,但它实际上没有显示文本被切断,因此我之前没有发布。
I believe the scrollbar is being introduced by the padding-top
and/or the border
. 我相信滚动条是由padding-top
和/或border
引入的。 You may need to reduce your height to account for these. 您可能需要降低高度以解决这些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.