5

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

目标是一个“粘性”页脚，页面长度随浏览器窗口高度、页眉和 3 列扩展。左右2个固定柱，中间1个流体柱。

我现在遇到的问题是，我的中心“流体”列似乎不像我预期的那样表现。基本上我希望固定列始终完全显示，中心列填充剩余的水平空间。但是中心栏占用了很多空间，所以我必须滚动才能查看右栏（见下图）。此外，“文本对齐：中心”代码似乎没有在中心列的可视区域内居中文本。任何帮助表示赞赏！

图片：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%;
}
4

2 回答 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;
}
于 2013-03-04T05:30:11.360 回答
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%;
}
于 2014-03-17T18:53:04.883 回答