我正在使用这个布局来创建一个 2 列的流体网页。
我似乎不能做的是使布局中的两个列的高度都为 100%，因此将页脚推到页面底部！
实现这种效果的最佳方法是什么？
提前致谢！
user151419
问问题
13214 次
8 回答
7
上次我读到这个时，最好的答案是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 -->于 2009-09-07T03:51:49.553 回答
1
于 2009-09-06T08:15:44.830 回答
0
尝试不同的布局，为什么要浪费时间尝试破解跨浏览器解决方案？
这似乎是您需要的，但我相信您可以找到其他人：http: //www.savio.no/examples/three-column-layout-6.asp
于 2009-09-06T08:16:14.033 回答
0
我在我个人网站的 CSS文件中执行以下操作：
#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标签的方式。我更喜欢让元素彼此浮动。
于 2009-09-06T08:23:01.633 回答
0
有 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>
于 2009-09-06T08:46:09.293 回答
0
这是另一种方式...
<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>
于 2009-09-06T09:07:42.650 回答
0
刚刚由 Matthew James Taylor发布了jsfiddle。对我来说它非常有用。我认为这不是为两列重新制作的问题。
<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>
</p>
#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;
}
于 2012-12-17T17:05:14.590 回答
-1
试试：overflow:hidden;就换行。希望有帮助
于 2009-10-30T10:18:02.420 回答