CSS粘滞页脚当内容不占用整个页面时 [英] CSS Sticky Footer when content does not take up entire page
问题描述
我有两个页面仅与内容框 div标记中包含的内容不同。你可以在这里看到它们：
我在下面的 short 版本中包含了html / css代码。我希望显示简短版本的显示内容，以便如果内容数量未填满整个页面，页脚仍然会粘贴到底部以及页眉和页脚之间的整个区域屏幕中间是与 content-box div相对应的白色。
我需要更改以完成此操作？\
更新1 我做了一个新的页面，用来完成@smallworld的建议。在这里可以看到。这有一个粘性页脚，但我希望外面的容器框来扩展页面的高度。
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN>
< html lang =en>
< head>
< meta http-equiv =Content-Typecontent =
text / html; charset = us-ascii>
< style type =text / css>
#main {
width：100％;
最低身高：100％;
身高：100％;
}
body {
width：100％;
}
＃header，＃content {position：relative; right：0; left：0}
#header {
height：75px;顶部：0;
背景：＃4396CA;
}
#footer {
width：100％;
职位：亲属;
height：50px;
bottom：0;
剩下：0;
背景：＃4396CA;
}
#content {
top：00px;
背景：＃F0F8FF;
最低身高：100％;
身高：100％;
}
＃content-box {
width：950px;
margin：0 auto;
背景颜色：#FFFFFF;
text-align：left;
border-right：1px solid＃B0B0B0;
border-left：1px solid＃B0B0B0;
padding-bottom：20px;
padding-top：20px;
最低身高：100％;
身高：100％;
}
< / style>
< title> EmbeddedAnalytics - 测试页< /标题>
< / head>
< body>
< div id =main>
< div id =header>这是标题< / div>
< div id =content>
< div id =content-box>
< b>内容不占用全部内容。但仍希望页脚贴到底部< / b>< br>
line1< br>
line2< br>
line3< br>
最后一行< br>< / div>
< / div>
< div id =footer> footer< / div>
< / div>
< / body>
< / html>
编辑：请参阅jsfiddle at http://jsfiddle.net/smallworld/gcpNh/ - 我用class =xyz代替id =xyz 在你的例子中。我知道，伸展到100％的高度不应该那么困难和紧张，但事实上，这是事实。我感到你的痛苦，这就是为什么尽我所能帮助。我做了一个更正 - 它应该是padding-bottom，而不是main类的margin-bottom。
CSS：
html {height：100％; min-height：100％！important; margin：0; padding：0; / **请参阅此处的高度，最小高度值。 ** /}
body {overflow：auto; padding：0; margin：0; height：100％; min-height：100％！important; / **请参阅此处的高度，最小高度值。 ** /}
.main {
position：relative; min-height：100％;高度：自动;背景：青色;
/ **在此处查看位置，高度，最小高度值。如果窗口大小在初始渲染后发生变化，高度自动保证
主div调整大小** /
}
.header {display：block; height：50px; position：relative; background：yellow ;文本对齐：中心;填充：10px的; }
.content {padding：20px; margin-bottom：50px; / **下边距以确保页脚不覆盖内容区** /}
.footer {display：block; position：absolute; bottom：0; left：0; width：100％; height ：50像素;背景：红色;颜色：白色;文本对齐：中心;填充：10px的; / **请参阅此处的位置，顶部，左侧和宽度属性。 ** /}
HTML
< div class =main clearfix>
< div class =header> header< / div>
< div class =clearfix content>
< h1>这个小提琴的目标是演示粘性页脚实现< / h1>
并且用最少量的CSS和HTML代替它，而不使用任何非凡的黑客。
< p>您的内容进入此处。添加更多内容，并将浏览器窗口调整为多种不同的尺寸，以查看您的网页呈现效果与非常少的内容相比。< / p>
< / div>
< div class =footer>页脚< / div>
< / div>
I have two pages that differ only by the content contained in the content-box div tag. You can see them here:
I have included the html/css code for the short version below. I would like to have the short version display so that if the amount of content does not fill up the entire page, the footer will still stick to the bottom AND the entire area between the header and the footer in the middle of the screen is the white corresponding to the content-box div.
What do I need to change to accomplish this?\
Update 1 I made a new page doing what @smallworld suggested. It can be seen here. This has a sticky footer, but I would like the outside "container" box to extend the height of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<style type="text/css">
#main {
width: 100%;
min-height: 100%;
height: 100%;
}
body {
width: 100%;
}
#header,#content { position:relative; right:0;left:0}
#header{
height:75px; top:0;
background: #4396CA;
}
#footer{
width: 100%;
position: relative;
height:50px;
bottom: 0;
left: 0;
background: #4396CA;
}
#content{
top:00px;
background: #F0F8FF;
min-height: 100%;
height: 100%;
}
#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 20px;
padding-top: 20px;
min-height: 100%;
height: 100%;
}
</style>
<title>EmbeddedAnalytics - Test Page</title>
</head>
<body>
<div id="main">
<div id="header">this is header</div>
<div id="content">
<div id="content-box">
<b>Content does not take up all of box. But still want footer to "stick" to bottom</b><br>
line1<br>
line2<br>
line3<br>
Last Line<br></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT: See jsfiddle at http://jsfiddle.net/smallworld/gcpNh/ - I have used class="xyz" instead of using id="xyz" in your example. I know that stretching to 100% height shouldn't be as difficult and stressful, but in reality, it is. I feel your pain and that's why trying to help as much as I can. I made one more correction - it should have been padding-bottom, not margin-bottom on "main" class.
CSS:
html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ }
body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ }
.main {
position:relative;min-height:100%; height:auto; background:cyan;
/** see position, height, min-height values here. Height auto to make sure
that main div resizes if window size changes after initial rendering **/
}
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ }
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ }
HTML
<div class="main clearfix">
<div class="header">header</div>
<div class="clearfix content">
<h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1>
And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks.
<p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p>
</div>
<div class="footer">footer</div>
</div>
这篇关于CSS粘滞页脚当内容不占用整个页面时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
