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&nbsp;id='container'> &nbsp;<div><div></div>CSS*{ &nbsp;margin:0; &nbsp;padding:0;}html,body{ &nbsp;height:100%; &nbsp;text-align:center;}#container{ &nbsp;position:absolute; &nbsp;top:50px;&nbsp;/*height&nbsp;of&nbsp;header*/ &nbsp;width:100%; &nbsp;bottom:50px;&nbsp;/*height&nbsp;of&nbsp;footer*/ &nbsp;background:white; &nbsp;text-align:center;}#container&nbsp;div{ &nbsp;display:inline-block; &nbsp;min-width:200px; &nbsp;height:100%; &nbsp;background:dodger&nbsp;blue;}JSFiddle演示或者，如果浏览器兼容性不是问题，您可以使用css3 calc()函数作为指出的另一个答案