Question

我正在尝试获取一组4 div列（类siteCol）高度来填充其容器的100％（id sites）。原因是，一列可以有比其他列更长的文本，但它们都应该与最高的列一样高。我尝试了一切。任何帮助将不胜感激。代码如下：

<!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>

Answer 1

除非您将父div设置为具有固定高度，否则此操作无效。您可能需要编写一些javascript来均衡列的高度。

100％div高度头痛

1 个答案: