Question

我最近一直在寻找一个CSS布局，它将显示一个固定宽度（最小宽度，最好可扩展）的单个居中列，占据整个高度（减去页眉和页脚）。

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

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

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

单一列，边距为0自动0自动居中和顶部：xx px为标题腾出空间？那么如何将其拉伸至100％高度？

任何帮助都非常感谢。

干杯， chross

Answer 1

<强>更新

使用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 使用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; }

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

Answer 2

我非常惊讶任何人都不知道如何用纯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

Answer 3

您可以使用绝对定位。

有一个绝对定位的容器，其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 Demo

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

Answer 4

如果你想通过jQuery这样做你可以使用像这样的东西

window.onload = function() { 

var height = screen.height;
var ele = document.getElementById("yourblockid");
ele.style.height = screen.height-2 + "px";
};

此脚本将使高度等于div高度

对您有帮助，或者您正在尝试提出其他问题？

CSS单列布局以页眉和页脚为中心固定宽度100％高度

4 个答案: