100％2列高度CSS问题！

Question

我使用这个layout来创建一个2列流体网页。

我似乎无法做到的是让布局中的两列都具有100％的高度，因此将页脚推到页面的底部！

什么是达到此效果的最佳方法？

在此先感谢！

Answer 1

希望这是你在找什么：

http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Answer 2

尝试不同的布局，为什么浪费你的时间试图破解一个跨浏览器的解决方案？
这似乎是你所需要的，但我敢肯定，你可以找到别人：http://www.savio.no/examples/three-column-layout-6.asp

Answer 3

我做了我的个人网站的CSS 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; 
} 

而且，我很少在嵌套方式div标签。我更喜欢让元素彼此浮动。

Answer 4

有2个div标签，每一个列浮动彼此相邻，而另一个div标签清除浮动，那么最后的另一个div来为页脚：

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

有了这一点，也更容易使其成为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> 

Answer 5

这里的另一种方式......

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

Answer 6

上次我读到这个最好的答案是display: table;主容器和display: table-cell;为每列。这将使列成为您指定的高度。

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

Answer 7

尝试：overflow:hidden;的包裹。 希望帮助

Answer 8

只是由马修詹姆斯泰勒jsfiddlepost。对我来说这非常有用。我认为这不是一个问题重塑为两栏。

<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; 
}​