Search code examples
htmlcsspositionheightsidebar

How to set 100% height on a sidebar div?


I'm trying to figure out a way to display a sidebar inside a div so it will take 100% of the available height.

The code is available here.
HTML - http://pastebin.com/4nBe2KQS
CSS - http://pastebin.com/r63bREbb

I have already tried a lot of answers I found like removing the block elements, setting the body height, stating de div position as relative, inserting and empty div after the sidebar and so on, but none of them seem to work properly, the only way I got it working is through an absolute position but in this way the entire positioning of the site breaks.

The sidebar is recognized as div id='menuIzquierda' and the whole page is made up from different php files, I don't know if this may affect the performing of the css rendering.

I would really appreciate if someone could help since I am stuck at this point.

Edit: There are two other css files but they shouldn't affect the performance since one only styles the buttons and the other one depends on the url, and the positioning isn't working on any url. Anyhow, i'll post them in the comments


Solution

  • So try this and see if it works. I tried it on my computer and it works great.

    menuIzquierda {

    margin-top: 25px;
    float: left;
    background-color: #333333;
    position: fixed;
    width: 20%;
    top: 0px;
    bottom: 0;
    left: 0;
    

    }

    So the position: fixed will lock it in place and then the top: 0, bottom: 0 and left 0; will make it go full height.