gpt4 book ai didi

javascript - 给 body 100% 的浏览器高度

转载 作者:太空宇宙 更新时间:2023-11-04 13:52:21 25 4
gpt4 key购买 nike

我有这个:

enter image description here

我想要这个:

enter image description here

我试过这个:

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>

结果:

enter image description here

关于javascript - 给 body 100% 的浏览器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33067777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com