gpt4 book ai didi

css - 如何创建 div 以填充页眉和页脚 div 之间的所有空间

转载 作者:数据小太阳 更新时间:2023-10-29 09:10:19 27 4
gpt4 key购买 nike

我正在努力从使用表格进行布局转向使用 div(是的,是的,这是一场激烈的辩论)。我有 3 个 div,一个页眉、内容和页脚。页眉和页脚各为 50px。如何让页脚 div 留在页面底部,让内容 div 填充它们之间的空间?我不想硬编码内容 div 的高度,因为屏幕分辨率可能会改变。

最佳答案

Flexbox 解决方案

使用 flex 布局,我们可以实现这一点,同时允许自然高度的页眉和页脚。页眉和页脚都将分别贴在视口(viewport)的顶部和底部(很像 native 移动应用程序),主要内容区域将填充剩余空间,而任何垂直溢出都可以在该区域内滚动。

See JS Fiddle

HTML

<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>

CSS

html, body {
margin: 0;
height: 100%;
min-height: 100%;
}

body {
display: flex;
flex-direction: column;
}

header,
footer {
flex: none;
}

main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}

关于css - 如何创建 div 以填充页眉和页脚 div 之间的所有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/206652/

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