J'utilise ce layout pour créer une page Web fluide de 2 colonnes.100% 2 Hauteur de colonne CSS Problème!
Ce que je n'arrive pas à faire est de faire en sorte que les deux colonnes dans la mise en page aient une hauteur de 100%, donc en poussant le pied de page vers le bas de la page!
Quel est le meilleur moyen d'obtenir cet effet?
Merci d'avance!
nous espérons que c'est ce que vous cherchez:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Essayez une autre mise en page, pourquoi perdre votre temps à essayer de pirater une solution multi-navigateur?
Cela semble être ce que vous avez besoin, mais je suis sûr que vous pouvez trouver d'autres: http://www.savio.no/examples/three-column-layout-6.asp
Je fais ce qui suit dans mon CSS site personnel file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Aussi, j'ai peu dans la façon de div étiquettes imbriquées. Je préfère que les éléments flottent l'un autour de l'autre.
ont 2 balises div, chacun comme une colonne flottante à côté de l'autre, et une autre balise div pour effacer les flotteurs, puis enfin une autre div être le pied de page:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
Avec cela, il est également plus facile pour en faire une colonne de 3.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Voici une autre façon ...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
La dernière fois que je l'ai lu sur ce la meilleure réponse était display: table; pour le conteneur principal et display: table-cell; pour chaque colonne. Cela fera de la colonne la hauteur que vous spécifiez.
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->Essayez: overflow:hidden; sur l'emballage. Espoir qui aide
Juste fait jsfiddle par Matthew James Taylor post. Pour moi, c'était très utile. Je pense que ce n'est pas un problème à refaire pour deux colonnes.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1"><p>Column 1</p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
in nec, dictumst
pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta
ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
</div>
<div id="col2">
<p>Column 2 </p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
</div>
<div id="col3">Column 3</div>
</div>
</div>
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}