Geek asks and answers

Does creating the height of the Div layer expand to 100% of the surrounding Div?

I am trying to make a fixed CSS width, two columns, header and footer.

So far I have managed to go this far: http://www.ffrebirth.com/ , but the problem is that I can’t get the sidebar and content area to extend to 100% of the surrounding layer. I want this to be visible in this image:

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

My initial thought was to establish #navigationboth #contentareain height:100%;and create an environment div. If you look at the code below, you will see #innerwrapperand set it to min-height:500px. However, this did nothing and min-heightdid not work, so I set it to height:500px;. This got the desired effect, however, whenever the content overflowed over 500px, it would not remain inside the layout and continue to flow over the footer.

The code that I have so far is listed on 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 CSS:

@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 tried to do this in several ways, for example, to set the height to only 100%, but this did not work, because whenever the browser was not full-screen, the text overflowed beyond the layout, ve deleted everything height:100%;.

+3
2

, equal .

100% ( ) - , "".

javascript , .

:
Div 100% Div ?

P.S. , .

+1

, y, x, div, div. x-axix, , . , , , . div 1px. CSS (-y), .

div, . , , , , div, .

. -, http://www.hillcrestnationalschool.com. Mozilla firefox , , 200 . , css.

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

, ia div, . - , , , div. , 0 150 , , , . div, .

0

More articles:


All Articles