Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

enter image description here

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.

like image 329
Shivam Pandya Avatar asked Feb 15 '23 22:02

Shivam Pandya


1 Answers

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

like image 188
Vishnuprasad R Avatar answered Feb 18 '23 12:02

Vishnuprasad R