固定页眉和页脚和100％高度的内容

我想创建一个固定页眉和页脚的网站，然后有一个内容div之间填充窗口（如高度100％），而不推动下面的页脚折。固定页眉和页脚和100％高度的内容

我创造了这个的jsfiddle来说明我想要做的事：http://jsfiddle.net/CZFBE/

<body> 
<header> 
    <nav>Menu</nav> 
</header> 
<section> 
    <div class="hero">Hello World</div> 
</section> 
<footer> 
    Copyright lol 
</footer> 
</body>

我需要的部分元素来填充空白的屏幕空间。这是可能吗？我一直试图解决这个问题，现在我感谢任何帮助或想法！

在此先感谢！

来源

2013-07-23 Zen5

你能编辑链接吗？有一个404错误。 –

http://jsfiddle.net/CZFBE/是正确的链接 –

尝试类似的东西，它为我工作：

header, footer, section{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
} 
header, footer{ 
    height: 10%; 
} 
header{ 
    top: 0; 
} 
footer{ 
    bottom: 0; 
} 
section{ 
    height: 80%; 
    top: 10%; 
    overflow: auto; 
}

两个页眉和页脚采取10％的空间，不动，部分采取休息和滚动。

来源

2013-07-23 16:07:07 orion78fr

另外，如果您需要在该部分中绝对放置某些内容，请在内部宽度和高度为100％的包装div上使用'position：relative;' – orion78fr

谢谢，但问题是我需要页脚和页眉有一个固定的高度（如4em），而不是百分比值。 – Zen5

我认为像素或其他值应该工作，只是将顶部和底部的值分别设置为页眉和页脚的高度，而不是将高度设置为 – orion78fr

检查出这个JSFiddle

如果你给body和htmlheight:100%

您可以通过给你的section做一个height:100%藏汉

给你必要的固定页脚+头，这是什么我想出了

body,html{ 
    height: 100%; 
    margin: 0 auto; 
} 
header{ 
    background: grey; 
    height: 4em; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
section{ 
    background: lightgrey; 
    height: 100%; 
    margin-top:4em; 
} 
.hero{ 
    text-align: center; 
} 
footer{ 
    background: grey; 
    height: 4em; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}

来源

2013-07-23 16:07:35

谢谢，但这给了我一个滚动。当我向下滚动时，“测试”。消失在菜单后面。 – Zen5

我更新了JSFiddle中的代码：http://jsfiddle.net/CZFBE/2/

html { 
    height: 100%; 
} 
body { 
    height:100%; 
    min-height: 100%; 
} 
header { 
    width:100%; 
    top:0px; 
    left:0px; 
    background: grey; 
    height: 4em; 
    position:absolute; 
} 
section { 
    height: 100%; 
    background: lightgrey; 
} 
.hero { 
    text-align: center; 
} 
footer { 
    width:100%; 
    bottom:0px; 
    left:0px; 
    position:absolute; 
    background: grey; 
    height: 4em; 
}

来源

2013-07-23 16:08:43 amatellanes

固定页眉和页脚和100％高度的内容

回答

相关问题