Html CSS-保持页面高度
我试图保持页眉在顶部，页脚在底部。如果容器增长，则应向下推页脚 我有以下使用Html CSS-保持页面高度,html,css,height,Html,Css,Height,我试图保持页眉在顶部，页脚在底部。如果容器增长，则应向下推页脚 我有以下使用calc（）的工作代码，但并非所有浏览器都支持它。所以，我需要另一种选择。请注意，我只想要CSS解决方案 代码： header{ height:50px; background:#CCC; } footer{ height:30px; background:#333; } main{ height:auto; min-height:calc(100% - 80px); }
calc（）header{
height:50px;
background:#CCC;
}
footer{
height:30px;
background:#333;
}
main{
height:auto;
min-height:calc(100% - 80px);
}
header{
position:fixed;
top:0;
left:0;
height:50px;
background:#CCC;
}
footer{
position:fixed;
bottom:0;
left:0;
height:30px;
background:#333;
}
main{
height:auto;
margin:50px 0 30px;
}
这样，您的页眉和页脚将始终保持在最上面和最下面，只是“主”容器的内容似乎是可滚动的。不太确定这是否是您搜索的…只需将绝对位置设置为页脚，并将相对于其父项的位置设置为下面的代码。 在这种情况下，Position fixed不是一个好的解决方案，因为Position fixed中的bottom:0表示第一个屏幕的底部，因此它不会随页面滚动。不提它有严重的f.ex问题。在移动设备上 编辑：尝试在新窗口中的代码段下方运行，因为预览未正确呈现。
*{margin:0；padding:0；}
html，正文{高度：100%；宽度：100%；位置：相对；}
标题{高度：50px；背景：#CCC；}
页脚{高度：30px；宽度：100%；背景：#333；位置：绝对；底部：0；}
/*主{高度：自动；最小高度：计算（100%-80px）；}*/
p{padding top:5px；}
p:类型{padding bottom:5px；}的最后一个
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.page-wrapper{
position:relative;
min-height:100%;
width:100%;
}
.header{
height:50px;
background:#CCC;
}
.footer{
background:#333;
height:30px;
position:absolute;
width:100%;
bottom:0;
}
.main{
}
</style>
</script>
</head>
<body>
<div class="page-wrapper">
<div class='header'>header</div>
<div class='main'>main</div>
<div class='footer'>footer</div>
</div>
</body>
html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
.页面包装器{
位置：相对位置；
最小高度：100%；
宽度：100%；
}
.标题{
高度：50px；
背景：#CCC；
}
.页脚{
背景：#333；
高度：30px；
位置：绝对位置；
宽度：100%；
底部：0；
}
梅因先生{
}
标题
主要的
页脚
只需将您的主要内容设置为100%的
最小高度*{
保证金：0；
}
html，正文{
身高：100%；
颜色：#FFF；
}
.包装纸{
最小高度：100%；
高度：自动！重要；/*除非您需要IE6支持，否则不需要此行和下一行*/
身高：100%；
边距：0自动-155px；/*底部边距是页脚高度的负值*/
}
页脚，.push{
高度：155px；
}
标题
主要内容
页脚
以下是您问题的总体解决方案
页脚是否始终在底部？尝试使用底部0和左侧的绝对位置0@Cheshire如果使用容器，它将不起作用grows@Hiral你到底是什么意思？如果容器增长了，请尝试使用位置：当内容增长时，应将“固定”和“左”以及“下至0”页脚按入。这个代码不会发生这种情况。那么，@Roman Bosski的解决方案就是你的出路。我很抱歉，没有做到这一点。在页脚之前添加一个pusher元素，页眉也应该在包装内，否则，一些高度将被削减。。添加文本和check@Hiral是的，你是对的，在复制和粘贴时错过了这一点。尝试使用更多hello段落并向下滚动。当内容很长时，它不起作用。。谢谢你的努力
* {
margin: 0;
}
html, body {
height: 100%;
color:#FFF;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px;
}
<div class="wrapper">
<header>Header</header>
Main Content
<div class="push"></div>
</div>
<footer>Footer</footer>