[RESOLVED] CSS Container Height 100% [Archive]

ginger05

12-19-2007, 09:39 AM

Hi,

I am new to using CSS boxes for layout. So far its been going really well and I like it compared to Tables but I have run into a problem I cant find a solution for.

I have a container Box that holds everything on the page. I want the container to be 100% height so that the bottom of the container is always at the bottom of the window even when their isnt much text on the page. Right now it does this when there is a lot of text but then when there isnt much text the container shrinks its height to to the amout of text therefore showing the background below the container. In HTML I would do this by telling the Table to go to a height of 100% but doing this in CSS doesnt do the trick.

Plese help!

drhowarddrfine

12-19-2007, 09:43 AM

You have to remember 100% of what? It's 100% of the parent, so does the parent have a height set? If it's the body then set the height to 100% and your container will then be 100% of that. You may have to set your margins to zero to make it look right.

ginger05

12-19-2007, 09:48 AM

You have to remember 100% of what? It's 100% of the parent, so does the parent have a height set? If it's the body then set the height to 100% and your container will then be 100% of that. You may have to set your margins to zero to make it look right.
I'm new to this but I dont think my container box has a parent other than the body. I want it to be 100% of the browser window that's open. I tried putting height: 100% in the body as well but it doesnt make a difference.

body {
font: 10pt Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
color: #333333;
height: 100%;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0;
text-align: left;
border-left: 10px solid #cc0000;
height: 100%;
}

I am trying to get the container box to act like a Table would when you put the main level of the Table as height 100%.

Thanks so much!

Fang

12-19-2007, 10:05 AM

In 'standards mode' that would be the html: html, body {
font: 10pt ...

Centauri

12-20-2007, 05:07 AM

As Fang said, the 100% height should be applied to both the html and body elements. If you also set the container to 100% height, it will not be able to expand with larger content (except in IE6) - you have to use min-height here.html, body {
height: 100%;
}
body {
font: 10pt Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
color: #333333;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0;
text-align: left;
border-left: 10px solid #cc0000;
min-height: 100%;
}
* html #container {
height: 100%;
}

The * html bit feeds 100% height to IE6, as it doesn't understand minimum height, but treats height like minimum height.

ginger05

12-20-2007, 07:58 AM

As Fang said, the 100% height should be applied to both the html and body elements. If you also set the container to 100% height, it will not be able to expand with larger content (except in IE6) - you have to use min-height here.html, body {
height: 100%;
}
body {
font: 10pt Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
color: #333333;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0;
text-align: left;
border-left: 10px solid #cc0000;
min-height: 100%;
}
* html #container {
height: 100%;
}

The * html bit feeds 100% height to IE6, as it doesn't understand minimum height, but treats height like minimum height.

Thank you that did work but now my footer isnt lining up at the bottom of my page like I want it too, any ideas why?

Here is my footer code
#footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
background-image:url(img/footerBG2b.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 80px;
}

Before I did the min height thing the footer did line up at the bottom of the page.

Thanks so much for your help!

Centauri

12-20-2007, 08:18 AM

The trick with the footer is to have it after the #container div in the html (which would normally place it off the bottom of the screen) and then pull it back up into view with a negative top margin. As its width is not constrained by #container, you will have to set that as well :#footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
background-image:url(img/footerBG2b.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 80px;
margin: -80px 0 0;
width: 880px;
}

ginger05

12-20-2007, 08:31 AM

The trick with the footer is to have it after the #container div in the html (which would normally place it off the bottom of the screen) and then pull it back up into view with a negative top margin. As its width is not constrained by #container, you will have to set that as well :#footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
background-image:url(img/footerBG2b.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 80px;
margin: -80px 0 0;
width: 880px;
}
Isnt the point of having the container box to have everything inside it? It seems strange to take the footer out of it. Also why is it that I have to make the width 10 pixels less than that of the container for it to line up. This seems strange to me.

The only other thing is my page has a little bit of vertical scrolling now. I'm not sure why.

Thanks!

Centauri

12-20-2007, 08:47 AM

Normally the container box would contain everything, but trying to get the footer to align with the bottom of the container, and still be pushed down with content is near impossible. The technique of putting the footer outside the container (pioneered, I believe, by Paul O'Brien) positions it easily relative to a known point - the bottom of the container. The technique relies on the container being 100% high with no top/bottom margins, paddng or borders, and the negative top margin of the footer being equal to its total height - if any of these are out, a scrollbar can result. Another thing that can happen is any margins on the top of content inside #container or #footer will result in the top of that element being pulled down by the margin due to the normal action of margin collapse. The difference in width is due to the summation of widths of the footer's left and right padding, and the container's left border.

ginger05

12-20-2007, 08:55 AM

Normally the container box would contain everything, but trying to get the footer to align with the bottom of the container, and still be pushed down with content is near impossible. The technique of putting the footer outside the container (pioneered, I believe, by Paul O'Brien) positions it easily relative to a known point - the bottom of the container. The technique relies on the container being 100% high with no top/bottom margins, paddng or borders, and the negative top margin of the footer being equal to its total height - if any of these are out, a scrollbar can result. Another thing that can happen is any margins on the top of content inside #container or #footer will result in the top of that element being pulled down by the margin due to the normal action of margin collapse. The difference in width is due to the summation of widths of the footer's left and right padding, and the container's left border.

Thank you so much for your help, I really appreciate it!:)

mblem

12-14-2009, 01:21 PM

Hi,
I have a relatively simple problem that has has me stumped for a week! I can't get my container height to automatically end after the content in my container. I set height to 100% and it makes my container end way up on the top of the page halfway through the banner - I followed the advice here and tried assigning the parent (body) to 100% first but either that's not working either or I'm doing it wrong! The only way I have been able to be able to affect my container is to assign height: 1000px; (or any number) but of course, that keeps the bottom of the container static for every page, making it end before my content is done or waaaay below it so viewers are uselessly scrolling to see nothing. Can anyone help me?

Here's my style sheet as of now:

html, body {
height: 100%;
}

body {
padding-top:1px;
color: black;
background-color: #cccccc;
margin:0 auto;
width: 800px;
height: 100%;
font-family:arial,sans-serif;
font-size:12px;
}

#container {
width: 760px;
min-height: 100%;
color:#ffffff;
background-color:#ffffff;
padding: 0 10px;
margin: 0 auto;
border: 1px solid ;
}

#header {
width: 760px;
height: 100px;
}

#navigation ul{
text-align: center;
width: 100%;
clear: both;
list-style-type: none;
}

#navigation ul li {
background-color:#ffffff;
display: inline;
}

#navigation ul li a {
color:#669ACC;
border: 1px solid #669ACC;
text-decoration: none;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navigation ul li a:hover{
color:#FFFFFF;
background-color:#669ACC;
border: 1px solid #669ACC;
}

#content {
width:760px;
}

#footer {
clear: all;
background-color:#FFFFFF;
color:#99CCFF;
text-align:center;
float: bottom;
}

h1 {
font-size: 16px;
font-family:arial,sans-serif;
color:black;
}

h2 {
font-size: 14px;
font-family:arial,sans-serif;
color:black;
}

h3 {
font-size: 20px;
font-family:arial, sans-serif;
color: #6699CC;
}

h4 {
font-size: 12px;
font-family:times new roman,sans-serif;
color: black
}

h5 {
font-size:13px;
font-family:arial,sans-serif;
font-style: italic;
color: gray
}

h6 {
font-size: 14px;
font-family:arial,sans-serif;
color:black;
}

and here's my home page right now:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>


<title>Battle of Cedar Creek Campground - Welcome</title>
<link href="style.css" rel="stylesheet" type="text/css" />


</head>
<body>

<div id="container">

<div id="header"> <img src="battlebans3.jpg" />

<div id="navigation">
<ul>
<li><a href="welcome.html">Welcome</a></li>
<li><a href="ccamenities.html">Amenities</a></li>
<li><a href="ccrates.html">Rates</a></li>
<li><a href="cccontact.html">Contact</a></li>
<li><a href="ccabout.html">About</a></li>
<li><a href="ccdirections.html">Directions</a></li>
<li><a href="ccattractions.html">Attractions</a></li>
<li><a href="ccreviews.html">Reviews</a></li>
<li><a href="ccphotos.html">Photos</a></li>
</ul>
</div>

<center><p><img src="flash.gif" alt="Historic, Family-Friendly, Fun!" width="500" align="center" height="69" /></p></center>

<p><img src="hpcreek.jpg" alt="banks of the cedar creek" width="340" align="right" height="255" /></p>

<p><img src="tenting.jpg" alt="tent camping" width="340" height="291" /></p>

<p><img src="signs3.gif" align="right" border="0" /></p>

<p><a href="mailto:battleofcedarcreek@gmail.com"><img src="email2.gif" href="battleofcedarcreek@gmail.com" width="272" align="center" height="272" border="0" /></a></p></center>

<center>

<div id="navigation">
<ul>
<li><a href="welcome.html">Welcome</a></li>
<li><a href="ccamenities.html">Amenities</a></li>
<li><a href="ccrates.html">Rates</a></li>
<li><a href="cccontact.html">Contact</a></li>
<li><a href="ccabout.html">About</a></li>
<li><a href="ccdirections.html">Directions</a></li>
<li><a href="ccattractions.html">Attractions</a></li>
<li><a href="ccreviews.html">Reviews</a></li>
<li><a href="ccphotos.html">Photos</a></li>
</ul>
</div>

<center>©Battle of Cedar Creek Campground<br />Photographic Images & WEB DESIGN:<a href="http://www.litenluv.com/">MBeePhotography</a></center>

</div>
</div>
</div>

</body>
</html>

Thanks in advance for any help with getting my container height to work automatically!

ps - already tried just height: auto; on style

Fang

12-14-2009, 01:54 PM

Add #overflow:hidden; to container

ArtphotoasiA

12-14-2009, 04:13 PM

Add #overflow:hidden; to container

Yes this should work.........

tubbydesigns

01-07-2010, 10:52 AM

Thanks FANG

overflow:hidden worked for me for same problem

dmikester1

01-07-2010, 04:33 PM

I'm having the exact same problem. Unfortunately, "overflow:hidden" does not work for me. I need to get my #content div to go down to within 2px of the bottom of the #container div. And I need the #content div to scroll automatically when content is overflowing.

CSS:
* {
padding: 0;
margin: 0;
}
body, html {
background-color:#BBC0CB;
height: 100%;
overflow: hidden;
}
#container {
background-color: #00007d;
color: #000000;
position: fixed;
width: 744px;
top: 10px;
left: 10px;
bottom: 10px;
overflow: hidden;
}
#wrap {
position: relative;
bottom: 10px;
overflow: hidden;
}
#header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 106px;
}
#navigation {
float: left;
left: 0;
width: 180px;
top: 0;
background-color: #00007d;
color: #ffffff;
padding: 10px;
oveflow: none;
}
#content {
float:left;
width: 522px;
background-color: #ffffff;
bottom: 0;
overflow: auto;
padding: 10px;
}

.clear {
clear: both;
line-height:0px;
font-size:1px;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Untitled</title>
</head>
<body>
<div id="container">
<div id="header"><img src="img/header.gif" alt="header"></div>
<div id="navigation">navigation</div>
<div id="content">my content</div>
<div class="clear"> </div>
</div>
</body>
</html>

Thank you much.
Mike

Fang

01-08-2010, 12:15 AM

#content {height:100%;}

dmikester1

01-08-2010, 08:48 AM

Wow! It really was that easy. Thank you Fang!

Mike

P.S. I think this thread can be marked as resolved by the OP.

fmk2

08-22-2011, 10:04 AM

Add #overflow:hidden; to container

Thanks very much, Fang. I have been trying to debug a very similar container height problem for several days, and finally found the answer here. The overflow property turned out to be what I needed.

I've become a member of this forum just so I could post a thank you, but I suspect this forum will be very useful in the future as well.