Issue with 100% height for Sidebar (Panel) in twitter bootstrap

Question

I'm in trouble when I use Sidebar (Panel) in twitter bootstrap. Here Is snap of that Sidebar (Panel).

And Here is my CSS code for it.

    .sharecartside .content {
    height: 100% !important;
    min-height: 100%;
    padding: 18px 10px 20px 30px;
}
.sharecartside {
    height: 100%;
    margin: 1px 0 0 508px;
}
.sharecartside {
    background: url("../images/bg_sidepannel.png") repeat-y scroll 0 0 transparent;
    float: right;
    margin: 1px 0 0 400px;
    position: absolute;
    width: 300px;
}

Any help will be appreciated. Thank you.

Answer 1

In order to make 'height:100%' work for any HTML element, its parent item should have a height value defined. Or the item will expand to height of the nearest ancestor with a height defined.

If all the ancestors of an element have no height defined or defined in percentage, then in order to have the element to expand to the height of the page, you should give both 'body' and 'html' a 100% height.

If you are using bootstrap responsive, using

   html,body{ height:100%}

in css should solve the problem. Make sure that this rule appear after you includes bootstrap-responsive.css