Question

我正在使用此layout创建一个2列流体网页。

我似乎无法做到的是，使布局中的两列高度均为100％，从而将页脚推到页面底部！

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

提前致谢！

Answer 1

上次我读到这一点时，主要容器的最佳答案为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 2

希望这就是你要找的东西：

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

Answer 3

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

Answer 4

我在个人网站的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 5

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

这是另一种方式......

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

由Matthew James Taylor jsfiddle做出post。对我来说这非常有用。我认为重新制作两列不是问题。

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

Answer 8

在包装上尝试：overflow:hidden;。希望有助于

100％2列高度CSS问题！

8 个答案: