问题描述
|
编辑：好的，所以我在这里有点茫然。实际上，这是一个很大的损失。我正在认真考虑增加个人对CSS的仇恨及其反直觉。
因此，我试图进行3列布局。它曾经基于Holy Grail布局，但是后来我决定不需要流动性或相等的列高，并开始修改CSS以更好地满足我的需求。
首先，中间列中的文本而不是换行，而是继续拉伸中间列，将其移动到左列下方。我实现了@ZincX的使用固定宽度列的建议（请参见下面的文章）。这样就固定了列，但是它们周围的容器没有随着它们伸展。如果您打开我的网站（请参见下面的链接），则页眉后面会隐藏一个完整的页脚。
另外，我决定进行分层标记-将标头移到源代码的底部，并以绝对定位将其放在顶部。我一弄清，很可能会在左侧导航栏中进行此操作。对于那些不熟悉这种做法的人，前几天我也才了解到它-将您的重要内容放在页面顶部可以使它对搜索引擎更加友好。
那么如何解决这种巨大的布局混乱呢？我只想要一个简单的“页眉，三列，页脚”布局。甚至在大多数浏览器中都能很好地显示以像素为单位的绝对位置吗？
这是我正在处理的网站。
这是我的样式表。
解决方法
您需要的是固定宽度的左列和固定宽度的右列以及带有左右边距的中间列。
这样做的方法如下：
#col_left {
display: block;
position:absolute;
top:0;
left:0;
bottom:0;
width:200px;
}
#col_right {
display: block;
position:absolute;
top:0;
right:0;
bottom:0;
width: 200px;
}
#col_middle {
display: block;
position:absolute;
top:0;
right:0;
bottom:0;
right:0;
margin-left:200px;
margin-right:200px;
}
* { margin:0; padding:0; border:none; }
#header {
position:absolute;
top:0;
left:0;
right:0;
height:75px;
background-color:#666666;
}
#belowHeader {
position:absolute;
top:75px;
left:0;
right:0;
height:auto;
min-width:604px;
text-align:center;
}
#colLeft {
height:auto;
min-height:100px;
float:left;
width:200px;
background-color:#888888;
}
#colMiddle {
height:auto;
min-height:150px;
width:200px;
display:inline-block;
background-color:#999999;
}
#colRight {
float:right;
height:auto;
min-height:100px;
width:200px;
background-color:#888888;
}
#footer {
position:absolute;
bottom:-75px;
left:0;
right:0;
height:75px;
background-color:#666666;
}
<div id=\"header\"></div>
<div id=\"belowHeader\">
<div id=\"colLeft\"></div>
<div id=\"colMiddle\"></div>
<div id=\"colRight\"></div>
<div id=\"footer\"></div>
</div>