gpt4 book ai didi

html - CSS - 无法让最小高度工作

转载 作者:可可西里 更新时间:2023-11-01 13:16:48 25 4
gpt4 key购买 nike

我正在尝试制作一个非常简单的网页。它应该是一个 1000 像素宽的绿色居中矩形,在红色背景上从网页的顶部一直延伸到底部,无论内容有多少。

不过我无法让它工作。如果我使用 min-height(如下所示),如果内容不足,绿色区域不会一直延伸到页面底部。如果我用height代替,内容多了就会溢出绿色区域。

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>

这是 CSS:

html {
height: 100%;
}

body {
background-color: #F00;
margin: 0;
min-height: 100%;
}

#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}

我知道这对于更多 div 是可行的,但它确实应该在不更改 HTML 的情况下工作。我该如何解决这个问题?

顺便说一下,我在 Safari 上。我不关心与不遵守标准的浏览器的兼容性。

最佳答案

这是一个工作示例:

<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>

有关更多信息,请查看 my answer类似question .

关于html - CSS - 无法让最小高度工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6799500/

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