100% div 高度头痛
我试图获取一组 4 div 列（类 siteCol）的高度来填充其容器（id sites）的 100%。原因是，一列的文本可以比其他列更长，但它们都应该与最高的列一样高。我已经尝试了一切。任何帮助将不胜感激。代码如下：
<!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>title</title>
<style type="text/css" rel="stylesheet">
html{height:100%}
body{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;height:100%}
#wrapper{background:#ccc;width:989px;min-height:1240px;margin:42px auto 0 auto;position:relative;display: block;}
#wrapper #content{width:670px;margin:0 auto;padding-top:200px;position:relative;font-size:14px;line-height:17px}
#wrapper #sites{width:870px;margin:135px auto 0 auto;height:auto;position:relative;display: block;}
#wrapper #sites .siteCol{text-align:center;width:185px;padding:9px;float:left;margin-left:14px;position:relative;height:100%;display: block;}
#wrapper #sites .siteCol p{text-align:left;color:#fff;font-size:12px;margin-top:280px;line-height:18px;}
#wrapper #sites #brighton{background:#7f826d;margin-left:5px}
#wrapper #sites #bridgewater{background:#4a9195;}
#wrapper #sites #beaver{background:#852b20;}
#wrapper #sites #vanport{background:#005f99;}
#footer{text-align:center;clear:both;margin:50px auto 0 auto;font-size:12px}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Content Block </p>
</div>
<div id="sites">
<div class="siteCol" id="brighton">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a nunc ligula. Vivamus sit amet massa felis. In dapibus congue nisl, quis ultrices diam ultricies sit amet. Pellentesque luctus orci vitae nunc rhoncus ut venenatis dui eleifend. Vestibulum eu dui at orci condimentum</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="bridgewater">
<p>Nunc euismod quam tristique dolor tincidunt venenatis. euismod quam tristique dolor </p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="beaver">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="vanport">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2010. All rights reserved./p>
</div>
</body>
</html>
I am trying to get a set of 4 div column's (class siteCol) height to fill 100% of its container (id sites). the reason being, one column can have longer text than the others, but they should all be as tall as the tallest column. I have tried everything. Any help would be greatly appreciated. Code below:
<!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>title</title>
<style type="text/css" rel="stylesheet">
html{height:100%}
body{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;height:100%}
#wrapper{background:#ccc;width:989px;min-height:1240px;margin:42px auto 0 auto;position:relative;display: block;}
#wrapper #content{width:670px;margin:0 auto;padding-top:200px;position:relative;font-size:14px;line-height:17px}
#wrapper #sites{width:870px;margin:135px auto 0 auto;height:auto;position:relative;display: block;}
#wrapper #sites .siteCol{text-align:center;width:185px;padding:9px;float:left;margin-left:14px;position:relative;height:100%;display: block;}
#wrapper #sites .siteCol p{text-align:left;color:#fff;font-size:12px;margin-top:280px;line-height:18px;}
#wrapper #sites #brighton{background:#7f826d;margin-left:5px}
#wrapper #sites #bridgewater{background:#4a9195;}
#wrapper #sites #beaver{background:#852b20;}
#wrapper #sites #vanport{background:#005f99;}
#footer{text-align:center;clear:both;margin:50px auto 0 auto;font-size:12px}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Content Block </p>
</div>
<div id="sites">
<div class="siteCol" id="brighton">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a nunc ligula. Vivamus sit amet massa felis. In dapibus congue nisl, quis ultrices diam ultricies sit amet. Pellentesque luctus orci vitae nunc rhoncus ut venenatis dui eleifend. Vestibulum eu dui at orci condimentum</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="bridgewater">
<p>Nunc euismod quam tristique dolor tincidunt venenatis. euismod quam tristique dolor </p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="beaver">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="vanport">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2010. All rights reserved./p>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
除非您将父 div 设置为固定高度，否则这将不起作用，您可能需要编写一些 javascript 来均衡列的高度。
This wont work unless you set the parent div to have a fixed height, you will probably need to write some javascript to equalize the height of the columns.