Question

I’m trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I’m having a problem with the height (100%) part of the CSS, it doesn’t seem to fit the entire height of the browser window though – it just displays 100% of what’s in the side panel.

How can I make the side panel reach the bottom of the page no matter how much content is inside of it?

#sidebar{
    float:left;
    position: relative;
    width: 20%;
    height: 100%;
    background-color: red;
}

Answer 1

Height 100% is always a pain.

Make sure that, html, body also have height: 100% and any div that’s wrapping it.