I use twitter bootstrap, after reading all the answers to the stack overflow, to expand the div to the bottom, I came up with this code for the sidebar.
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 made the sidebar stretched to the bottom of my page, but it also inserted a scroll bar, and when I scroll down, my text is turned off. Any help would be greatly appreciated. Does anyone know how to extend div / sidebar (i.e. Height = 100%) using only bootstrap css classes?
jfiddle is here , but it doesn’t actually display the cut text, so I haven’t published it before.
source share