100% div height headaches_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-14 23:08 出处：网络

I am trying to get a set of 4 div c开发者_运维技巧olumn\'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

I am trying to get a set of 4 div c开发者_运维技巧olumn'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>

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.