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

Question

CSS单列布局居中固定宽度100％高度w页眉和页脚我最近一直在寻找一种CSS布局，它将显示一个固定宽度（最小宽度，最好可扩展）的单个居中柱，占据整个高度（减去页眉和页脚）。有什么建议吗？我已尝试过这里发布的几种方法，但没有一种符合我的标准。另外，我不想为此使用JS，所以它必须是纯CSS。我不是专家所以我不知道采取哪种方法：三列，每侧柱边距减去中心柱宽度的一半，还有一个人造中心柱，可伸展到100％高度？我有点不喜欢这个想法，因为我的副栏目没有任何内容单个列，边距为0自动0自动居中和顶部：xx px为标题腾出空间？然后我该如何将其拉伸至100％高度？任何帮助高度赞赏。干杯，chross

Answer 1

您可以利用绝对定位。

• 有一个绝对定位的容器，top其bottom值和值分别等于页眉和页脚的高度，这会将容器拉伸到剩余高度

• 让inline-block孩子在里面有100%高度

• 申请text-align:center父母将inline-block孩子与中心对齐

HTML

<div id='container'>
 <div><div></div>

CSS

*{
 margin:0;
 padding:0;}html,body{
 height:100%;
 text-align:center;}#container{
 position:absolute;
 top:50px; /*height of header*/
 width:100%;
 bottom:50px; /*height of footer*/
 background:white;
 text-align:center;}#container div{
 display:inline-block;
 min-width:200px;
 height:100%;
 background:dodger blue;}

JSFiddle演示

或者，如果浏览器兼容性不是问题，您可以使用css3 calc()函数作为指出的另一个答案