CODEWITHSUNDEEP
csshtml
DominikAmon
DominikAmon

Reputation: 1106

HTML5 floating div-layout min-height:100%

I'd like to achieve Floating divs that fill the entire height, which are hosting in another div. (I've set the DOC-Type to <!doctype html> for HTML5)

The divs do flow the way I want, but for some reason, I can't "strech" them to cover whole the div they are nested in.

Here is the HTML Code:

<div id="page">
    <div class="leftNavigation">
        LEFT
        <ul>
            <li class="active"><a href="#">2014</a></li>
            <li><a href="#">2013</a></li>
            <li><a href="#">2012</a></li>
            <li><a href="#">2011</a></li>
            <li><a href="#">2010</a></li>

        </ul>
    </div>
    <div class="rightNavigation">
    RIGHT
        <ul>
            <li class="active"><a href="#">2014</a></li>
            <li><a href="#">Some other link</a></li>                
        </ul>
    </div>
    <div class="myContent">
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />       
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
    </div>        
</div>

The CSS so far is pretty small:

    html, body
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }             
    div#page
    {
        min-height: 100%;
        position: relative;
        background: #F66;
        width: 90%;
        left: 5%;

    }
    .leftNavigation
    {
        float: left;
        left: 0;
        width: 70px;
        background-color: #9999ff;
        width: 70px;
        min-height: 100%;
    }
    .rightNavigation
    {
        float: right;
        right: 0;
        width: 70px;
        background-color: #00FFFF;
        width: 70px;
        padding-bottom: 0px;            
        height:100%;
    }                
    .myContent
    {

        height:100%;
        left: 0;
        right: 0;
        background-color: #999966;
        margin: 0;
        margin-left: 70px;
        margin-right: 70px;
    }                        
    ul
    {
        padding: 0;
        margin: 0;
    }
    ul li
    {
        list-style: none;
    }

I end up like this where the red area is still visible and I can't figure out the problem, how to "strech" the divs: Red Area should never be visible, even when there's a scrollbar

I uploaded the code also to JSFiddle: http://jsfiddle.net/3wvy2/

I tried already several options like height:100%, min-height:100% for the divs inside of "page". I googled a lot and most of the times I found the "clear:both" workaround, which 'id like to avoid, but it is not working anyways. Any Ideas?

Upvotes: 2

Views: 705

Answers (2)

Cristian D
Cristian D

Reputation: 691

 html, body
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;            
}


div#page
{
    background: #F66;
    width: 90%;
    left: 5%;
    position: relative;
}

.leftNavigation
{
    float: left;
    left: 0;
    width: 70px;
    background-color: #9999ff;
    width: 70px;
    height: 100%;
    position: absolute;
}


.rightNavigation
{
    float: right;
    right: 0;
    width: 70px;
    background-color: #00FFFF;
    width: 70px;
    padding-bottom: 0px;  
    height: 100%;
    position: absolute;
}


.myContent
{

    height:100%;
    left: 0;
    right: 0;
    background-color: #999966;
    margin: 0;
    margin-left: 70px;
    margin-right: 70px;
}


ul
{
    padding: 0;
    margin: 0;
}
ul li
{
    list-style: none;
}

Use this, it is going to work as you wanted it to :) Fiddle: http://jsfiddle.net/3wvy2/14/

Upvotes: 0

Cristian D
Cristian D

Reputation: 691

I played around a bit with your code and fixed it. Now it works properly:

div#page
{
    height: 100%;
    position: relative;
    background: #F66;
    width: 90%;
    left: 5%;

Remove the min- from div#page. Resulting code should be:

html, body
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;            
    }


    div#page
    {
        height: 100%;
        position: relative;
        background: #F66;
        width: 90%;
        left: 5%;

    }

    .leftNavigation
    {
        float: left;
        left: 0;
        width: 70px;
        background-color: #9999ff;
        width: 70px;
        min-height: 100%;
    }


    .rightNavigation
    {
        float: right;
        right: 0;
        width: 70px;
        background-color: #00FFFF;
        width: 70px;
        padding-bottom: 0px;            
        height:100%;
    }


    .myContent
    {

        height:100%;
        left: 0;
        right: 0;
        background-color: #999966;
        margin: 0;
        margin-left: 70px;
        margin-right: 70px;
    }


    ul
    {
        padding: 0;
        margin: 0;
    }
    ul li
    {
        list-style: none;
    }

Upvotes: 1

Related Questions