100% DIV height for doc not viewpoint

Question

I'm trying to make a div fill the entire doc height, not just the viewpoint height. When 100% height is set on body, html and the div, the div will fill 100% of the viewpoint. However, when another div make the doc height go beyond the viewpoint, and the page is scrolled, the 100% height stayed at the original viewpoint height.

I've make the follow jsfiddle to demonstrate the problem:

http://jsfiddle.net/728CA/1/

Sorry if this is a repeat question, I have looked through many others questions and can't find an answer which works for my problem. I'm new to developing responsive sites, and I'd really appreciate some help.

css:

body, html {
    height:100%;
}

#sidebar {
    height:100%;
    width:100px;
    background:#FF00FF;
    float:left;
}

#content {
    width:200px;
    float:left;
}
.clear {
    clear:both;

html:

<div id="sidebar">
    <nav>
        Links
    </nav>
</div>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna iaculis, tincidunt lacus et, gravida sapien. Sed velit metus, congue ac porttitor ut, ornare euismod tortor. Fusce ultricies pulvinar ante, eget facilisis leo rutrum eu. Donec turpis dui, elementum tristique lectus vel, semper posuere nisi. Curabitur at adipiscing lectus. Duis consectetur, urna sit amet feugiat vestibulum, sapien massa facilisis lectus, vitae sagittis augue tellus et augue. Quisque vitae nisi at metus interdum mollis. Vivamus in nisi placerat, rutrum sapien varius, dapibus est. Integer pharetra enim sem, nec porttitor velit suscipit vitae. Ut suscipit, sapien eget placerat congue, justo elit sagittis arcu, a elementum dolor leo a ante. Suspendisse auctor laoreet orci, ut varius est consequat vitae. In eu libero at libero faucibus eleifend et id magna. Vivamus molestie mi eu massa aliquam, sit amet ullamcorper ante semper. Mauris dictum orci id ante porta euismod. Quisque in ultrices sapien. Ut euismod dui ac justo egestas suscipit.

    Integer vitae pretium eros. Suspendisse sapien ipsum, feugiat sed lorem sed, vestibulum lacinia sapien. Proin quis risus at massa lobortis porta. Vestibulum pretium rhoncus dui quis volutpat. Nullam nulla erat, bibendum at mauris et, imperdiet cursus turpis. Cras quis tellus sed urna sagittis rutrum lobortis eu elit. Fusce volutpat venenatis augue a fermentum. Praesent luctus tortor felis, eget varius lacus mattis eu. Aliquam tempor, mi at venenatis ultrices, erat metus mattis risus, id convallis ante mauris quis ipsum. Pellentesque vitae sodales purus. Sed eu faucibus tellus. Nam ultricies lorem enim, vitae vestibulum risus hendrerit ac. Integer condimentum orci in arcu vehicula porta. Ut euismod tincidunt justo, ac feugiat massa. Sed id sollicitudin purus.
</div>
<div class="clear"></div>

This is a common problem to floated sidebar not extending to the height of the neighbour content. There are a few ways around it - check this out http://stackoverflow.com/questions/1610710/need-css-sidebar-height-to-expand-with-content — Katstevens, Aug 31 '13 at 11:03
You can also make it 100% of the document, look here: http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height — Rich, Aug 31 '13 at 11:05
There are several ways to do this. @redreggae's method is preferable to mine but if for some bizarre reason you can't add a container you can [monkey with the css to get the same result](http://jsfiddle.net/728CA/7/). — Moob, Aug 31 '13 at 11:18

score 1 · Answer 1 · answered Aug 31 '13 at 11:04

1

Look at my update

jsfiddle

I've made a container with pink background and the content has white background.

<div id="container">
    <div id="sidebar">
        <nav>
        Links
        </nav>
    </div>
    <div id="content">

    </div>
    <div class="clear"></div>
</div>

CSS

#container {
    min-height:100%;
    background:#FF00FF;
    width: 300px;
}

#sidebar {
    width:100px;
    float:left;
}

#content {
    width:200px;
    float:left;
    background:#FFFFFF;
}

answered Aug 31 '13 at 11:04

bitWorking

12,485
1
32
38

I loved this solution, and I thought this may have initially solved my problem, but when I swapped my coloured background out for an image I realised I have a bigger problem - as I'm trying to keep this responsive, although I could place some fixed widths, I'm trying to avoid that. Here another jsfiddle to show how the problem has progressed: http://jsfiddle.net/AcQec/ – kirgy Aug 31 '13 at 15:22

100% DIV height for doc not viewpoint

1 Answers1