100％div高度头痛

我想获得一组4个div列（类siteCol）高度来填充其容器的100％（编号sites）。原因在于，一列的文本可能比其他文本的长，但它们应该都与最高的列一样高。我已经尝试了一切。任何帮助将不胜感激。下面的代码：100％div高度头痛

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

来源

2010-09-07 rson

我强烈建议使用其他人的模板，因为它已经完成。 [这一]（http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm）是我的基于列的布局的前往。扩展到4列布局应该是合理的直接。 – 2010-09-07 15:59:36

这是一个更好的参考：http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm – 2010-09-07 16:09:45

我遇到的困难是我需要在列之间有空格。这些例子很好，但我需要在列之间有透明度...... – rson 2010-09-07 17:09:11

这不会工作，除非你设置父DIV有一个固定的高度，你可能需要写一些JavaScript来平衡柱的高度。

来源

2010-09-07 15:59:08 3urdoch

根本不是。请参阅http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm – 2010-09-07 16:00:13

100％div高度头痛

回答

相关问题