100% div hauteur maux de tête

J'essaie d'obtenir un ensemble de 4 colonnes div (classe siteCol) hauteur pour remplir 100% de son conteneur (id sites). la raison étant, une colonne peut avoir un texte plus long que les autres, mais ils devraient tous être aussi grands que la colonne la plus haute. J'ai tout essayé. Toute aide serait grandement appréciée. Code ci-dessous:100% div hauteur maux de tête

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

Source

2010-09-07 rson

Je vous recommande fortement d'utiliser le modèle de quelqu'un d'autre pour cela, comme cela a déjà été fait. [This one] (http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm) est ma référence pour les mises en page basées sur des colonnes. Il devrait être raisonnablement facile d'étendre à une disposition de 4 colonnes. –

C'est une référence encore meilleure: http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm –

la difficulté que je rencontre est que j'ai besoin d'avoir un espacement entre les colonnes. Ces exemples fonctionnent très bien, mais j'ai besoin d'avoir de la transparence entre les colonnes ... – rson

Ce ne fonctionnera pas à moins que vous définissez la div parent d'avoir une hauteur fixe, vous aurez probablement besoin d'écrire un peu de javascript pour égaliser la hauteur des colonnes.

Source

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

Pas du tout. Voir http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm –

100% div hauteur maux de tête

Répondre

Questions connexes