CSS圣杯-2固定/ 1液柱问题

Question

Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix. 好的，我一直在为网站实施“圣杯”式的布局，到目前为止，它非常接近，但我注意到我想修复两件事。

The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 目标是使页面长度随着浏览器窗口高度，页眉和3列而扩展的“粘性”页脚。 2 fixed columns on the left and right side, and a fluid column in the middle. 左右两侧有2个固定柱，中间有一个流体柱。

The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. 我现在遇到的问题是，我的中心“流体”列似乎不像我预期的那样运行。 Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. 基本上，我希望固定栏始终完整显示，而中间栏填充剩余的水平空间。 But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). 但是中心列占用了大量空间，因此我不得不滚动查看右列（请参见下图）。 Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. 另外，“ text-align：center”代码似乎不是在中心列的可见区域内的居中文本。 Any help appreciated! 任何帮助表示赞赏！

image: http://i.imgur.com/FPuSiIu.png 图片： http : //i.imgur.com/FPuSiIu.png

html: 的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: 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

No need to float . 无需float 。 Just position: absolute the sidebars and give the center div fixed margin on both sides. 正确的position: absolute是侧边栏，并给中心div两侧固定的边距。

JSFiddle JSFiddle

CSS 的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

i've done this on my layout and it works fine for me 我已经在我的布局上完成了此操作，对我来说效果很好

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 个解决方案

解决方案1
5 已采纳 2013-03-04 05:30:11

解决方案2
0 2014-03-17 18:53:04

CSS圣杯-2固定/ 1液柱问题

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-03-04 05:30:11

解决方案2 0 2014-03-17 18:53:04

解决方案1
5 已采纳 2013-03-04 05:30:11

解决方案2
0 2014-03-17 18:53:04