Question

好吧所以我一直在为我的网站实施'圣杯'式布局，到目前为止它已经非常接近但我注意到了两件我想要解决的问题。

目标是一个“粘性”页脚，页面长度随浏览器窗口高度，标题和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%;
}

Answer 1

无需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;
}

Answer 2

我已经在我的布局上做了这件事，它对我来说很好用

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%;
}

CSS圣杯 - 2个固定/ 1个流体柱的问题

2 个答案: