lundi 20 avril 2015

How can I make a div expand to the height of the page?

I am trying to make the blue div expand to the height of the page but nothing seems to work: JSFiddle

css:

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    min-height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    min-height:100%;
}

and html:

<div id="page">
    <div id="main">
        main
    </div>
    <div id="sidebar">
        <ul>
           <li>something</li>
           ...
           <li>something</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

The same needs to hold true for the sidebar if the page is much longer than the sidebar content.

Aucun commentaire:

Enregistrer un commentaire