html - tooltip bootstrap css

Barra lateral Twitter Bootstrap extendida a la parte inferior

Question

Estoy usando Twitter bootstrap, después de leer todas las respuestas en el desbordamiento de la pila para extender un div al final, se me ocurrió este código para mi barra lateral.

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;
}

Ahora bien, esto hizo que la barra lateral se extendiera hasta la parte inferior de la página, pero también insertó una barra de desplazamiento, y cuando me desplazo hacia abajo mi texto se corta. Cualquier ayuda sería apreciada. ¿Alguien sabe cómo extender una barra lateral / div (es decir, altura = 100%) utilizando solo clases bootstrap css?

jfiddle está aquí, pero en realidad no muestra el texto cortado, así que no lo publiqué antes.

Answer 1

Creo que la barra de desplazamiento está siendo introducida por el padding-top y / o el border . Es posible que deba reducir su altura para dar cuenta de esto.