我有这个:
我想要这个:
我试过这个:
html, body
{
height: 100%; //and this -> 100vh
}
但是没用。
这是我的代码:
https://jsfiddle.net/zbjaaxe6/9/
有什么解决办法吗？
最佳答案
这个问题很适合flexbox:
CSS
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh; // set min-height instead of height, otherwise body won't
// grow with content, if content is bigger than viewport
}
header {
height: 50px; // adjust to what you want
}
main {
flex: 1; // This will make the 'main' block to expand !
}
footer {
height: 30px; // adjust to what you want
}
HTML
<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
结果:
- Fiddle
- Flexbox 是一种 IE10+ 解决方案。 Browser support in detail
关于javascript - 给 body 100% 的浏览器高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33067777/