asked on

Stretch DIV to bottom of screen behind fixed footer?

Please have a look at my client's demo site.

I want to get the dark gray div to stretch all the way to the bottom of the page and tuck itself behind the fixed footer. It is tucked behind now, but not all the way to the bottom.

dimmergeek

ASKER

If you click the "About" menu link you 'll be taken to a page that shows the div going behind the footer, but not to the bottom of the screen. This is definitely screen size/resolution dependent, but I don't want to fake it out with excessive padding. It will create a scroll bar which may not be needed.

dimmergeek

ASKER

Here is my page layout (content removed)

<body>
<div id="container">
     <div id="menu"></div>
    <div id="header"></div>    
    <div id="content">    	
        <div id="content_left">
        	<div class="content_left_section"></div>
        </div>        
        <div id="content_right">
            <div class="product_box">
                <div class="product_info"></div>
            </div>
            <div class="cleaner_with_width">&nbsp;</div>
            <div class="cleaner_with_height">&nbsp;</div>            
        </div> <!-- end of content right -->    
    	<div class="cleaner_with_height">&nbsp;</div>
    </div> <!-- end of content -->    
    <div id="footer"></div> 
    <!-- end of footer -->
</div> <!-- end of container -->
<div align=center></div>
</body>

Open in new window

Here is the CSS for the div elements used above:

body {
     margin: 0;
     padding: 0;
     line-height: 1.5em;
     font-family: Verdana, Arial, san-serif;
     font-size: 11px;
     color: #ffffff;
     background: #4b4743;
}
#container {
     width: 960px;
     margin: 0 auto;
     padding: 0 10px;
     background: #1c1c1b url(../images/bg.jpg) repeat-y;
     height: 100% !important;
}
#menu {
     clear: both;
     width: 960px;
     height: 45px;
     background: url(../images/menu_bg.jpg) no-repeat;
}
#header {
     clear: both;
     width: 960px;
     height: 200px;
     padding: 0;
     margin: 0;
     background: #000000 url(../images/logo.png) no-repeat;
     background-position: center;
}
#content {
     clear: both;
     width: 920px;
     padding: 0 20px;
     padding-bottom: 155px;
}
#content #content_left {
     float: left;
     width: 188px;
     padding: 10px;
     background-color: #171716;
     border: 1px solid #212120;
}
#content_left .content_left_section {
     clear: both;
     padding-bottom: 10px;
     border-bottom: 1px solid #2b2b2a;
     margin-bottom: 20px;
}
#content #content_right {
     float: right;
     width: 670px;
}
#content_right .product_box {
     float: left;
     width: 606px;
     height: auto;
     padding: 10px;
     border: 1px solid #333;
}
.product_box .product_info {
     float: left;
     width: 580px;
}
.cleaner_with_width {
     float: left;
     width: 20px;
     height: 0px;
     font-size: 1px;	
}
.cleaner_with_height {
     clear: both;
     width: 100%;
     height: 30px;
     font-size: 1px;	
}
#footer {
     clear: both;
     width: 960px;
     padding: 20px 0px 20px 0;
     text-align: center;
     border-top: 1px solid #25211e;
     color: #000000;
     background: #111110 url(../images/wall.png) repeat-x;
     position:fixed;
     bottom:0px;
}

Open in new window

Tom Beck

Put a wrapper around your container like this:

<div id="wrapper">
<div id="container">
<div id="menu">
</div>
<div id="header">
</div>
<div id="content">

...
...

</div> 
<div id="footer">
<p style="text-align:center;">
©Paulo Martellucci Stone Masonry, Inc. 2013 | <a href="tel:484-560-8599">mobile: (484) 560-8599</a> | <a href="tel:610-965-0566">office: (610) 965-0566</a><br>
E-Mail: <a href="contact.html">comments@martelluccimasonry.com</a> | Contractor Number: PA094034
</p>
</div>

</div>
</div> 
<div align="center"></div>

Wrapper gets this css:

#wrapper {
display: table;
height: 100%;
margin: 0px auto;
}

Then replace all css for #container with this:

#container {
display: table-row;
height:100%
}

Your #content css becomes this:

#content {
background: url("../images/bg.jpg") repeat-y scroll 0 0 #1C1C1B;
clear: both;
height: 100%;
padding: 0 20px 155px;
width: 920px;
}

EDIT: I just moved the closing </div> for the wrapper.

COBOLdinosaur

Instead of applying the background-color to the body, try applying it to the html tag.

Cd&

dimmergeek

ASKER

Neither solution recommended fixed the height of the div at all.
TommyBoy's suggestion narrowed width a bit.

Changes not uploaded to web, just run locally.

Tom Beck

Simple solution. Leave everything as you have it in the link and add this to the top of myStyles.css:

html, body { height: 100% }

dimmergeek

ASKER

That did not solve it (made it worse, height of content was too short.
Added height: 100% to content DIV, but the site is still not right.
Dark gray background does not always extend to go behind footer to bottom of page.

Tom Beck

Adding height:100% to the content div will cause the dark gray background to stop short of the bottom. This is because the content div does not extend the full height of the page. There's a header above it.

Take out the height:100% from the content div.

Add this to the top of your stylesheet:

html, body { height: 100% }

Make those changes to the live link you provided and let's have a look. When I make those changes to your site in Firebug, it works perfectly.

dimmergeek

ASKER

100% height removed from content
CSS added at top of stylesheet as recommended.

Entire site now has content background color stop short of the end of the content div.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dimmergeek

ASKER

Awesome! Implemented and the issues appears to be fixed in IE, Chrome, Firefox and Safari!

Thank you!