gpt4 book ai didi

html - CSS:页眉、页脚和可拉伸(stretch)的主要内容区域

转载 作者:太空宇宙 更新时间:2023-11-03 18:32:04 26 4
gpt4 key购买 nike

我想要一个页眉高 120 像素,页脚高 120 像素的网页,和一个最小高度为 600px 的主要内容,但是当浏览器是垂直拉伸(stretch)超过 840px 的高度(或者用户缩小Firefox 上的“control minus”),我希望 body 垂直拉伸(stretch)填充所有可用空间减去页眉和页脚空间。

这是我尝试过的:

<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>

这是CSS:

header { height: 120px; background: red; }
div#mainContent { min-height: 600px; height: 100%; background: green; }
footer { height: 120px; background: blue; }

完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header { height: 120px; background: red; }
div#mainContent { height: 100%; background: green; }
footer { height: 120px; background: blue; }
</style>
</head>
<body>
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
</body>
</html>

达到我想要的效果的正确方法是什么。

谢谢。

最佳答案

将正文大小更改为您不能拥有 px 大小的百分比和它们不能一起工作的百分比。

div#mainContent { height: 100%; background: green; }

关于html - CSS:页眉、页脚和可拉伸(stretch)的主要内容区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19579384/

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