gpt4 book ai didi

CSS3 : How can I set middle DIV to maximum height?

转载 作者:行者123 更新时间:2023-11-28 09:19:27 25 4
gpt4 key购买 nike

我想在我的网页上使用三个 <div> 区域:页眉内容页脚

页脚 <div> 应该贴在网页底部。

Header <div> 应该贴在页面顶部。

内容 <div> 应该填满页面中间的整个区域。

这是基本布局:

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

为了让页脚留在我添加的页面下方

#footer
{
position: fixed;
bottom: 0;
}

对于 Content <div>,我使用背景图像,精确缩放到 div 元素的尺寸:

#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}

现在我希望 Content <div> 恰好是 HeaderFooter 之间 ViewPort 的剩余高度,而不添加任何 JavaScript,无论如何什么内容后来添加到Content <div>

我如何在 CSS3 中做到这一点?

最佳答案

如果 footerheader 的大小已知,您可以使用 calc() .所以假设两者一起使用 100px,这应该可行:

html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}

但是请注意,旧浏览器不支持此功能。也看看 compatibility table对于可能需要的前缀。

Example Fiddle

关于CSS3 : How can I set middle DIV to maximum height?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15999282/

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