好吧,我一直在为我的网站实施'圣杯'式布局,到目前为止它非常接近,但我注意到了两件事我想修复。CSS圣杯 - 有2个固定/ 1柱流体的问题
目标是一个“粘”页脚,页长随浏览器窗口高度,标题和3列而扩展。左侧和右侧有2个固定柱,中间有一个液柱。
我现在遇到的问题是,我的中心“流体”栏似乎没有像我预期的那样。基本上我想要固定的柱子总是被完全展示出来,中间的柱子填充剩下的水平空间。但是中间栏占据了很多空间,因此我必须滚动才能查看右栏(参见下图)。此外,“文本对齐:中心”代码看起来并不是将中心文字置于中间栏的可视区域内。任何帮助感谢!
图像:http://i.imgur.com/FPuSiIu.png
HTML:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
我用走了不同的路线,它工作正常,我的定位是:http:/ /jsfiddle.net/ExplosionPIlls/ANZct/ – 2013-03-04 05:24:19