Question

我看过很多类似的问题，但是找不到我要找的答案。更多信息如下：

我正在使用twitter bootstrap，所以我想要一个兼容它的解决方案
布局将显示为like this。对不起，我无法嵌入图片，因为我需要先拍10张。
This和我到目前为止一样接近。问题是我不能让侧边栏停在页脚。
我需要将主要内容扩展为与侧边栏相同。
侧边栏和主要内容是两种不同的颜色，大小不一。它们必须都延伸到页脚
请注意，最小高度必须为100％
如果内容增长太多（即需要滚动才能看到它），页脚应该移动
我不想使用JavaScript，但如果需要，我不介意解决方案，只要它随着JS逐步增强（我也使用jQuery）。
页面内容水平居中，具有固定宽度

Answer 1

我认为这可能是，您正在寻找的内容：two column layout ^source。

主要想法是在height: 100%和<body>上设置<html>，然后确保容器也占用所有高度（通过min-height: 100%）。您可能会注意到该代码还包含IE6的解决方法，因为它最初编写时，与IE6作战只是另一天的工作。

这是通过修改更复杂和更常用的holy grail layout ^source来实现的。

Answer 2

通过css它可能但需要一些技巧。

你需要通过添加padding-bottom：1000px使得两个div / columns非常高，然后“欺骗浏览器”认为它们使用margin-bottom不是那么高：-1000px。通过以下示例可以更好地解释。

http://jsfiddle.net/mediasoftpro/Ee7RS/

希望这没关系。

Answer 3

您可以尝试 display：table; 到 Parent Div 和 display：table-cell; 到 Child Div 为了达到你的成果....

见代码： -

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title>  <style> .container { background:red; width:600px; display:table; } .left { background:yellow; width:200px; display:table-cell; } .mid { background:blue; width:400px; display:table-cell; } .right { background:green; width:200px; display:table-cell; } </style> </head> <body> <div class="container"> <div class="left">shailender</div> <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. fff</div> <div class="right">afdafaf</div> </div> </body> </html>

演示： - http://jsbin.com/ebucoz/13/edit

<强> Read More About Fluid Width Equal Height Columns with Examples

Answer 4

嘿，我想你想要这个

<强>的CSS

**

.wraper, .header, .footer{
width:80%;
    margin:0 auto;
    overflow:hidden;
    border:solid 2px red;
}
.header{
    height:100px;
    background:green;
    border-color:darkred;
}
.sidebar{
width:20%;
    background:yellow;
    float:left;
}
.content{
width:70%;
    background:pink;
    float:right;
}
.footer{
    height:100px;
    background:blue;
    border-color:black;
}
#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}
#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}
#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}
#content {
    float: left;
    left: 81%;
    overflow: hidden;
    position: relative;
    text-align: justify;
    width: 72%;
}

** 的 HTML

<div class="header">header bar </div> <div class="wraper"> <div id="container2"> <div id="container1"> <div id="sidebar"> This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text </div> <div id="content"> This is dummy text here This is dummy text here This is dummy </div> </div> </div> </div> <div class="footer">Footer bar</div>

现场演示http://jsfiddle.net/rohitazad/Pgy75/2/

有关此click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
的更多信息

Answer 5

唯一真正的答案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%">
    <tr>
        <td width="10%">
            left
        </td>
        <td>
            right
        </td>
    </tr>
</table>

如何使用twitter bootstrap使多个列消耗100％的高度？

5 个答案: