Content wrapper to fill 100% height of page

Question

I'm struggling to get my div (#content) to full 100% height of the page, if I resize my browser, my div (.divAboutRight) stretches accordingly to accommodate the content but my wrapper div (#content) does not? I have an image (#logo) which is centered to it's parent (#content) which it is not doing when the parent doesn't fill 100%.

I'm sure I'm missing something really basic.

Any assistance or guidance would be appreciated.

           <style>
            html{margin:0; padding:0; width:100%; height:100%;}
            body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}

            .head{width:100%; height:60px; background-color:#FFFFFF;}
            #content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
            #Back
            {
                position:absolute;
                left:0;
                background:url(../images/Back.png) no-repeat;
                background-size: 100% 100%;
                float:left;
                min-width:55%;
                height:59%;
                border:1px solid green;
            }
            #logo
            {
                display:block;
                position: absolute;
                top: 50%;
                left: 50%;
                max-height: 132px;
                max-width: 133px;
                margin: -66.5px 0 0 -66px;
                z-index:9999999;
            }
            .divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}

            </style>

            <body>
            <div class="head">
                <!-- Header Content -->
            </div>

            <div id="content">
                    <div id="Back">
                        <!-- absolute positioned -->
                   </div>

                <!-- Fixed logo to be center of content wrapper -->
                <img id="logo" width="133" height="132" src="images/logo.png"/>

                <div class="divAboutRight">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.

            Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.

            Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.

            In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.

            Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
                </div>


            </div>
            </body>

Appears to take `100%` here - note I increased the `border` to 10px.. http://jsfiddle.net/ePsYN/ — Josh Crozier, Oct 21 '13 at 17:33
Thanks @JoshC, it does but if you put a lot of content in the (.divAboutRight) div it over laps the (#conten) div. or to simulate squash the browser width. — user1475479, Oct 21 '13 at 17:44
possible duplicate of [CSS Div stretch 100% page height](http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height) — iambriansreed, Oct 21 '13 at 17:48
See my answer, it gives two different techniques you can use. They both work very well, and cross-browser etc... — kumarharsh, Oct 21 '13 at 17:54
@iambriansreed, I referred to that post "CSS Div stretch 100% page height" that works except with my case it cuts off my div(.divAboutRight) and doesnt allow it's full height? — user1475479, Oct 21 '13 at 18:22
@JoshC, I updated the http://jsfiddle.net/ePsYN/1/ and you can see the overlap with content in the div — user1475479, Oct 21 '13 at 18:28

score 1 · Answer 1 · answered Oct 21 '13 at 17:45

From what I can see, Your div #content does not cover the full height because you have a div .head with a height of 60px;

Yo can either float your .head div or make it's position:absolute;

You could also include the .head div iside the #content div like this:

        <body>
        <div id="content">

            <div class="head">
                <!-- Header Content -->
            </div>

                <div id="Back">
                    <!-- absolute positioned -->
               </div>

            <!-- Fixed logo to be center of content wrapper -->
            <img id="logo" width="133" height="132" src="images/logo.png"/>

            <div class="divAboutRight">
                    <!-- Dynamic Content -->
            </div>


        </div>
        </body>

Thanks @Bogdan Costea I thought it might be that as well, I tried your solutions but still same result — user1475479, Oct 21 '13 at 18:05

kumarharsh · Answer 2 · 2013-10-22T09:37:12.183

1

If you are OK supporting IE9+, here is the code:

<style>
    #content{
        .
        .
        height:calc(100% - 60px);
        .
    }
</style>

Calc is supported in all modern browsers now.

On the other hand, if you can't support calc, here is one more way:

<style>
  .head {
    ... // rest of head's css
    z-index: 2;
  }
  #content {
    position: relative;
    box-sizing('border-box');
    height: 100%;
    padding-top: 60px;   // height equal to the header
    margin-top: -60px; // this will offset your content up again
    z-index: 1;  // make the content go BEHIND the head
    ... // rest of the CSS
 }
</style>

note: this will make the scrollbar start from behind the head, because the content will be under the head.

edited Oct 22 '13 at 09:37

answered Oct 21 '13 at 17:52

kumarharsh

18,961
8
72
100

thanks I tried your solution. Even if I omit the head I still get the same result – user1475479 Oct 22 '13 at 11:03
can you make a fiddle and demonstrate your issue? – kumarharsh Oct 22 '13 at 12:21
Hi @Harsh here is a fiddle modified with content which display the overlapping http://jsfiddle.net/ePsYN/1/ .Thanks – user1475479 Oct 22 '13 at 14:01

Content wrapper to fill 100% height of page

2 Answers2