Making Div layer height expand to 100% of the surrounding Div?

Question

I'm trying to make a CSS fixed width, two column, header and footer layout.

So far I've managed to get this far: http://www.ffrebirth.com/, however the problem is that I can't get the side bar and content area to extend to 100% of the surrounding layer. What I want it to do can be seen in this image:

http://i232.photobucket.com/albums/ee200/joshebowe/Layout.png

My initial thought would be to set #navigation and #contentarea to height:100%; and create a surrounding div. If you look at the code below you'll see #innerwrapper and set it to min-height:500px. This however did nothing and the min-height wouldn't work, so I set it to height:500px; This got the desired effect, however, whenever the content overflowed over 500px it wouldn't remain inside the layout and would continue to flow over the footer.

The code I have so far is this on the index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Final Fantasy Rebirth</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper">
<div id="layoutbg">
<div id="topnavigation"><div id="topnavigationhome"><img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Home">Final Fantasy Rebirth</a></div><div id="topnavigationlinks"><img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy VII">VII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy VIII">VIII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy IX">IX</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy X">X</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy X-2">X-2</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XII">XII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XIII">XIII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XIII-2">XIII-2</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy Versus XIII">Versus XIII</a></div></div>
<div id="banner"><img src="assets/banner.jpg" width="785" height="125" alt="Final Fantasy" /></div>
<div id="innerwrapper"><div id="navigation"><img src="assets/navigation.png" width="149" height="27" alt="Final Fantasy" />
<div id="navigationtextholder"><h1>Coverage</h1>
<ul class="navigationlinks">
<li><a href="" target="_self" title="Final Fantasy VII">Final Fantasy VII</a></li>
<li>Final Fantasy VIII</li>
<li>Final Fantasy IX</li>
<li>Final Fantasy X</li>
<li>Final Fantasy X-2</li>
<li>Final Fantasy XII</li>
<li>Final Fantasy XIII</li>
<li>Final Fantasy XIII-2</li>
<li>Final Fantasy Versus XIII</li></ul>

<h1>Multimedia</h1>
<ul class="navigationlinks">
<li>Full Motion Videos</li></ul>

<h1>Site Related</h1>
<ul class="navigationlinks">
<li>Home</li>
<li>Affiliation</li></ul>

<h1>Affiliates</h1>
<ul class="navigationlinks">
<li>Your Link Here?</li></ul>
</div></div>
<div id="contentarea"><img src="assets/content.png" width="97" height="27" alt="Final Fantasy" />
<div id="contenttextholder">
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div></div></div>
<div id="footer"><div id="copyright">Website copyright Final Fantasy Rebirth &copy; 2005-2011. No copyright infringement intended. FINAL FANTASY is a registered trademark of Square Enix Co., Ltd.</div></div>
</div></div>
</body>
</html>

And the CSS is:

@charset "utf-8";
/* CSS Document */

body { margin:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#c1c3c3;
background-image:url(assets/bg.gif);
}

/* Text Styles */
a:link,
a:active,
a:visited
{ color: #FFFFFF;
text-decoration: none;
}

a:hover { color: #4f7785;
text-decoration: none;
}

h1 { font-size:12px;
font-weight:bold;
margin: 0px;
padding-top:1px; }

p { font-size:11px;
margin-top: 0px;
margin-bottom:5px;
}

#navigationtextholder h1 { background-image:url(assets/h1bg.gif);
background-repeat:no-repeat;
width:140px;
height:17px;
margin:0px;
text-indent:15px;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}

ul.navigationlinks { list-style: none;
margin-left:-40px;
margin-top:0px;
margin-bottom:5px;
}

/* Layout Styles */
#wrapper { width: 797px;
margin: 0 auto;
}

#layoutbg { width:797px;
position:absolute;
background-color:#03080a;
}

#topnavigation { width:785px;
height:24px;
border:1px #000000 solid;
background-image:url(assets/topnavigationbg.gif);
background-repeat:repeat-x;
background-position:top;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:3px;
font-size:12px;
font-weight:bold;
}

#topnavigation img { margin-bottom:-1px;
}

#topnavigationhome { float:left;
height:24px;
margin-left:5px;
margin-top:5px;
}

#topnavigationlinks { text-align:right;
float:right;
height:24px;
margin-right:5px;
margin-top:5px;
}

#banner { width:785px;
height:125px;
border:1px #000000 solid;
margin-left:5px;
margin-right:5px;
float:left;
}

#innerwrapper {
}

#navigation { width:150px;
height:100%;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-left:5px;
float:left;
}

#navigationtextholder { width:140px;
margin: 0 auto;
word-wrap: break-word;
}

#contentarea { width:629px;
height:100%;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-left:161px;
margin-top:134px;
}

#contenttextholder { width:619px;
margin: 0 auto;
padding-left:8px;
padding-right:8px;
padding-bottom:5px;
word-wrap: break-word;
}

#footer { width:785px;
border:1px #000000 solid;
background-image:url(assets/footerbg.gif);
background-repeat:repeat-x;
background-position:top;
height:24px;
float:left;
margin-left:5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
}

#copyright { height:24px;
margin-top:4px;
text-align:center;
}

I've tried doing it several ways, such as setting the height of everything to 100%, however this didn't work as whenever the browser wasn't full screen the text would overflow outside of the layout, so I've removed all the height:100%;.

when creating sample code or data, please reduce it to the essential information to explain the problem. That helps us help you. — the Tin Man, Jun 04 '11 at 21:34

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

You might want to use the faux column technique or equal height columns.

100% (or any percetage) height can only refer to the set height of the parent - if the parent's height is not explicitly set, then the percentage heights will default to "auto".

There are also javascript workarounds but I'd go for the above solutions.

Possible duplicate of:
How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

P.S. Try to keep your question neat and report only the essential next time.

edited May 23 '17 at 12:14

Community

1
1

answered Jun 04 '11 at 21:49

luca

36,606
27
86
125

Used the Faux Column technique, thanks and I will do, first time using the site and all. – Josh Jun 04 '11 at 22:13

score 0 · Answer 2 · answered Jun 04 '11 at 22:31

You may need images that repeat in the y-axis and not the x-axis, applied to a div that stretches the full height and includes the divs in consideration. Your image on the Navigation menu is repeats in the x-axix and that way, it will only get as far down as the hight of the thin image. You need to create an image opposite in dimensions to what you have. That image should be the width of the navigation div and a 1px height. Using CSS to tile it verticaly (repeat-y) it will stretch to the footer regardless of the number of navigation menu buttons.

The image has to be applied to a div that stretches the full length of the layout. I am not feeling very well so I just took a glance at your code and it seems the innerwrapper does include the navigation and the main content, two divs whose background you want to stretch the full length.

See an example of a website I created for a school http://www.hillcrestnationalschool.com. If you right-click on the left side-bar in Mozilla firefox and choose to view the image, you will see a very thin image in terms of hight but which is about 200px in width. I have tiled it vertically using css.

#innerwrapper{ 
border:1px #000000 solid;
background: #0a171d url(assets/navicontentbg.png) repeat-y;
background-position:top-left;
}
#navigation {
width: 150px;
float: left;
}

As you can see the image ia applied to a div that stretches the full length and not the navigation itself. An even easire way is to create a thin image that does stretch the whole width of the innerwrapper or whatever div you have that covers relevant divs. You devide the image into two parts, the left most part 0 to 150px will cover the navigation, then a small part to separate the two, after which you have the portion for the content area. If this is applied to the appropriate div, these parts will fall in place.

Making Div layer height expand to 100% of the surrounding Div?

2 Answers2