I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.
我正在努力从使用表格进行布局，再到使用div（是的，是的辩论）。我有3个div，标题，内容和页脚。页眉和页脚各50px。如何让页脚div保持在页面底部，内容div填充两者之间的空间？我不想硬编码内容div高度，因为屏幕分辨率可以改变。
6 个解决方案
#1
33
To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:
总结（这来自Traingamer提供的CSS Sticky Footer链接），这就是我使用的：
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
#2
18
Flexbox solution
Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.
使用flex布局我们可以实现这一点，同时允许自然高度页眉和页脚。页眉和页脚都将分别粘贴到视口的顶部和底部（非常像本机移动应用程序），主内容区域将填充剩余空间，而任何垂直溢出都将在该区域内滚动。
见JS小提琴
HTML
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
#3
8
To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.
要扩展Mitchel Sellers的答案，请给出内容div高度：100％并给它一个自动余量。
For a full explanation and example, see Ryan Fait's CSS Sticky Footer.
有关完整的解释和示例，请参阅Ryan Fait的CSS Sticky Footer。
Since you know the size (height) of your header, put it inside the content div (or use margins).
由于您知道标题的大小（高度），因此将其放在内容div中（或使用边距）。
Position absolute will give you problems if your content is larger (taller) than the window.
如果您的内容比窗口更大（更高），绝对位置会给您带来问题。
#4
0
A way to do this using CSS Grid:
使用CSS Grid执行此操作的方法：
index.html
的index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
的main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
#5
-3
if you are trying to maximize the height of your content div, in the CSS add
如果你试图最大化你的内容div的高度，在CSS添加
height: 100%;
身高：100％;
#6
-8
#footer {
clear: both;
}
#1
33
To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:
总结（这来自Traingamer提供的CSS Sticky Footer链接），这就是我使用的：
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
#2
18
Flexbox solution
Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.
使用flex布局我们可以实现这一点，同时允许自然高度页眉和页脚。页眉和页脚都将分别粘贴到视口的顶部和底部（非常像本机移动应用程序），主内容区域将填充剩余空间，而任何垂直溢出都将在该区域内滚动。
见JS小提琴
HTML
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
#3
8
To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.
要扩展Mitchel Sellers的答案，请给出内容div高度：100％并给它一个自动余量。
For a full explanation and example, see Ryan Fait's CSS Sticky Footer.
有关完整的解释和示例，请参阅Ryan Fait的CSS Sticky Footer。
Since you know the size (height) of your header, put it inside the content div (or use margins).
由于您知道标题的大小（高度），因此将其放在内容div中（或使用边距）。
Position absolute will give you problems if your content is larger (taller) than the window.
如果您的内容比窗口更大（更高），绝对位置会给您带来问题。
#4
0
A way to do this using CSS Grid:
使用CSS Grid执行此操作的方法：
index.html
的index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
的main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
#5
-3
if you are trying to maximize the height of your content div, in the CSS add
如果你试图最大化你的内容div的高度，在CSS添加
height: 100%;
身高：100％;
#6
-8
#footer {
clear: both;
}