我最近在研究一种CSS布局，可以显示一个固定宽度（尽可能是可扩展的最小宽度）的居中单列，占据整个高度（减去页眉和页脚）。
有任何建议吗？我已经尝试了在这里发布的几种方法，但都不符合我的要求。此外，我不想使用JS来实现这一点，所以必须使用纯CSS。
我不是专家，所以不知道该采取哪种方法：
使用三列，其中每个侧边栏的边距减去中心列宽度的一半，再加上一个伪中心列以延伸到100％的高度？ 我有些不喜欢这个想法，因为我的侧边栏将没有任何内容。
单列，具有margin 0 auto 0 auto以将其居中，并具有top：xx px以为页眉腾出空间？ 那么如何将其拉伸到100％的高度？
非常感谢任何帮助。
致敬， chross
更新
使用display:flex可以在现代浏览器（2015年以后）中简单地实现：
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>
第一版使用border-box，因此不兼容较旧的浏览器（您可能需要添加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; }
版本 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;}
版本 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;}
哎呀，我很惊讶任何人都不知道如何只使用纯CSS和良好的浏览器支持来解决它（而不需要任何calc() - 这是一种好方法，但现在使用它还为时过早）
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<p>content of the page</p>
</div>
</div>
<div id="footer">
<div class="holder">
<div class="frame">
<p>footer content</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
html{height:100%;}
body{
margin:0;
height:100%;
text-align:center;
}
p{margin:0 0 10px;}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
.w1{
width:100%;
display:table-row;
background:#0ff;
}
#header {background: #ccc;}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
}
#footer .holder{
height:1%;
display:table-row;
background:#f00;
}
#footer .frame{display:table-cell;}
于是我创建了 Fiddle
#content {
height:calc(100% - 250px);
}
250px是您的页眉和页脚总高度。
创建一个拥有绝对定位的容器，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;
}
如果浏览器兼容性不是问题，你可以使用css3 calc() 函数，正如另一个答案所指出的那样。
window.onload = function() {
var height = screen.height;
var ele = document.getElementById("yourblockid");
ele.style.height = screen.height-2 + "px";
};
这个脚本会使高度与div的高度相等。
对你有帮助吗，还是你想问别的什么？