logo标签列表

CSS圣杯布局 - 两个固定列和一个流动列的问题

htmlcss
5

好的，我一直在努力实现我的网站的“圣杯”式布局，到目前为止已经非常接近了，但我注意到两个需要修复的问题。

目标是有一个粘着的页脚，当浏览器窗口高度变化时，页面长度可以自动调整，还有一个页眉和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%;
}
我采用了不同的定位方式：http://jsfiddle.net/ExplosionPIlls/ANZct/ - Explosion Pills
2个回答
5
不需要使用 float。只需将侧边栏进行 position: absolute 定位，并在中心 div 的两侧设置固定的边距即可。

JSFiddle

CSS

#container{
    position: relative;
}

#left, #right {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
}

#left {
    left: 0;
}

#right {
    right: 0;
}

#center {
    margin: 0 200px;
}
@Caleb：如果可以的话，我会选择这个实现方案。 - Jace
0

我在我的布局上做过这个，对我来说运行良好。

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container{
  display: inline-flex;
  width: 100%;
  height: 100%;
  background: lightblue;
}

#left {
  width: 240px!important;
  min-width: 240px!important;
  background: red;
  height: 100%;
}

#right {
  width: 400px!important;
  min-width: 400px!important;
  background: red;
  height: 100%;
}

#center {
  background: blue;
  width: 100%;
  min-width: 600px;
  height: 100%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接