CSS单列布局居中固定宽度100%高度w页眉和页脚

Question

我最近一直在寻找一种CSS布局,它将显示一个固定宽度(最小宽度,最好可扩展)的单个居中柱,占据整个高度(减去页眉和页脚).

有什么建议吗？我已尝试过这里发布的几种方法,但没有一种符合我的标准.另外,我不想为此使用JS,所以它必须是纯CSS.

我不是专家所以我不知道采取哪种方法:

三列,每侧柱边距减去中心柱宽度的一半,还有一个人造中心柱,可伸展到100%高度？我有点不喜欢这个想法,因为我的副栏目没有任何内容

带有边距0的单列自动0自动居中和顶部:xx px为标题腾出空间？然后我该如何将其拉伸至100%高度？

任何帮助高度赞赏.

干杯,chross

Answer 1

更新

使用以下方法为现代浏览器(2015)执行此操作的简单方法display:flex:

html, 
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>

上面允许固定高度的页眉和页脚(只是为样式增加一个高度)以及可变高度(如当前所示 - 可以根据页眉和页脚的内容而改变),内容占用剩余的空间.

如果内容比文档长,则页脚将被按下.

老帖子:

使用纯css有几种方法可以做到这一点.基本上你需要从这样的html结构开始:

<div id="wrapper">
    <div class="top"></div>
    <div class="middle">
        <div class="container">
        </div>
    </div>
    <div class="bottom"></div>
</div>

版本1使用边框,因此与旧版浏览器不兼容(您可能需要添加moz,webkit和ms前缀以使其在所有浏览器中运行):

html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }

版本1
版本1,内容
版本1居中列

版本2使用绝对定位,并且更加适合跨浏览器:

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

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}

版本2
版本2,内容
版本2居中列

版本3稍微更改了html,但如果你有可变的高度页眉和页脚,它会更强大:

<div id="wrapper">
    <div class="table">
        <div class="top row"><div class="cell"></div></div>
        <div class="middle row"><div class="container cell"></div></div>
        <div class="bottom row"><div class="cell"></div></div>
    </div>
</div>

CSS

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

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}

.middle {height:100%;}
.container {padding:10px;}

版本3
版本3具有不同的高度页眉和页脚
版本3,内容
版本3居中列