好的,我一直在努力实现我的网站的“圣杯”式布局,到目前为止已经非常接近了,但我注意到两个需要修复的问题。
目标是有一个粘着的页脚,当浏览器窗口高度变化时,页面长度可以自动调整,还有一个页眉和3列。左右两边各有2个固定的列,中间是一个流动的列。
我遇到的问题是,现在我的中间“流动”的列似乎不像我预期的那样运作。基本上,我想让固定的列始终完全显示,而中心列填充剩余的水平空间。但中心列占用了很多空间,使得我必须滚动才能查看右侧列(见下面的图像)。此外,“text-align: center”代码似乎不能将文本居中显示在中心列的可视区域内。希望有所帮助!
图片: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%;
}