我最近一直在研究一种 CSS 布局，它将显示一个居中的列，该列具有固定宽度（最小宽度，最好是可扩展），占据整个高度（减去页眉和页脚）。
对此有什么建议吗？我已经尝试过这里发布的几种方法，但没有一个符合我的标准。另外，我不想为此使用 JS，所以它必须是纯 CSS。
我不是专家，所以我不知道该采取哪种方法：
三列，每侧列的边距减去中心列宽度的一半以及一个人造中心列以拉伸到 100% 高度？我有点不喜欢这个想法，因为我的侧栏将没有任何内容
边距为 0 的单列自动 0 自动使其居中，顶部：xx px 为标题腾出空间？那么如何将其拉伸到 100% 高度呢？
非常感谢任何帮助。
干杯， 交叉
【问题讨论】：
更新
使用 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>
版本 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; }
Version 1
Version 1 with content
Version 1 centred column
版本 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;}
Version 2
Version 2 with content
Version 2 centred column
版本 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;}
Version 3
Version 3 with different height header and footer
Version 3 with content
Version 3 centred column
【讨论】：
嗯，我很惊讶没有人知道如何用纯 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
【讨论】：
使用纯 css 执行此操作的唯一方法是使用 css calc() 函数：
#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()函数作为另一个答案指出
【讨论】：
如果你想通过 jQuery 来做，你可以使用类似这样的东西
window.onload = function() {
var height = screen.height;
var ele = document.getElementById("yourblockid");
ele.style.height = screen.height-2 + "px";
};
这个脚本会把高度等于div的高度，
它对你有帮助吗，或者你想问别的？
【讨论】：