Question

我正在尝试制作CSS固定宽度，两列，页眉和页脚布局。

到目前为止，我已经设法做到这一点：http://www.ffrebirth.com/，但问题是我不能让侧栏和内容区域扩展到周围层的100％。在这张图片中可以看到我想要它做的事情：

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

我最初的想法是将#navigation和#contentarea设置为height:100%;并创建一个周围的div。如果您查看下面的代码，您会看到#innerwrapper并将其设置为min-height:500px。然而，这没有做任何事情，min-height无效，所以我将其设置为height:500px;这会产生预期的效果，但是，当内容溢出500px时，它就不会保留在里面布局并将继续流过页脚。

我到目前为止的代码是在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>

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;
}

我尝试过多种方式，例如将所有内容的高度设置为100％，但是这不起作用，因为每当浏览器不是全屏时，文本就会溢出布局，所以我'已删除所有height:100%;。

Answer 1

您可能想要使用faux column technique或equal height columns。

100％（或任何百分比）高度只能指父母的设定高度 - 如果父母的身高未明确设定，则百分比高度将默认为“自动”。

还有javascript解决方法，但我会选择上述解决方案。

可能重复：
How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

P.S。尽量保持你的问题整洁，并在下次报告必要时。

Answer 2

您可能需要在y轴而不是x轴重复的图像，应用于拉伸整个高度的div并包含考虑的div。导航菜单上的图像在x-axix中重复，这样，它只能达到薄图像的高度。您需要创建与您拥有的尺寸相反的图像。该图像应该是导航div的宽度和1px高度。使用CSS将其垂直平铺（repeat-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的任何div。您将图像分为两部分，最左边的部分0到150px将覆盖导航，然后是一小部分将两者分开，之后您将获得内容区域的部分。如果这适用于适当的div，这些部件将落在适当的位置。

使Div层高度扩展到周围Div的100％？

2 个答案: