在twitter bootstrap中，侧边栏（面板）的高度为100％

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