CODEWITHSUNDEEP
htmlcss
Hellodan
Hellodan

Reputation: 1208

Problems with 100% height

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

Upvotes: 0

Views: 251

Answers (3)

IROEGBU
IROEGBU

Reputation: 948

I had the same problem on a project I was working on, I fixed it thus:

#sidebar{
    min-height:100%;
    height:auto !important;
    height: 100%;
    //add other styling needed
}

Upvotes: 0

peduarte
peduarte

Reputation: 1677

Height 100% is always a pain.

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

Upvotes: 3

Rob
Rob

Reputation: 15168

When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.

Upvotes: 1

Related Questions