我正在尝试获取一组 4 div 列的 (class 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>
最佳答案
除非您将父 div 设置为固定高度，否则这不会起作用，您可能需要编写一些 javascript 来均衡列的高度。
关于css - 100% div 高度让人头疼，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3660307/