gpt4 book ai didi

html - 我如何将所有内容放入 html 和 body

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

我有一个元素,但我无法将所有内容都放入 body 中。子元素总是在 body 之外,当我看我的代码时看起来没问题,所以我做了一个实验;我通过给每个 HTML 元素一个边框来跟踪它们,这样我就可以直观地看到它们的行为方式。这是我目前所拥有的。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>A nice example</title>
</head>
<body>
<div class="box">
<div class="childbox"></div>
</div>
</body>
</html>

CSS 示例 1,为所有内容设置 100% 高度

html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/

输出:一切都溢出到 html 之外。

CSS 示例 2,为主体及其子项设置 100% 高度,html 除外

html{border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/

输出:所有内容都在 html 中,但不占据屏幕的整个高度。我知道我可以通过使主体 min-height: 100vh 来做到这一点。但是当 100vh 已满时它会停止扩展。

我的目标是,

  1. 使正文和 html 的高度为 100%/不使用 vh。
  2. 并且不会溢出到body之外,或者html
  3. 在添加子元素时,我希望从 html 到 body 的所有内容都动态扩展高度,而不是超出范围并溢出或相互重叠。
  4. body 应该在 html 里面,div 应该在 body 里面。

请帮忙。

最佳答案

这就是正在发生的事情,CSS 正在计算 100% 的宽度和高度,然后添加 10px/5px 的填充,之后导致元素溢出 10/5px。您可以通过在代码开头添加以下 css 来更改此设置:

* {
box-sizing: border-box;
//Edit:
margin: 0;
padding: 0;
}

这将确保填充占 100% 的宽度和高度。希望这有效!
编辑:
此外,您在 htmlbody 样式中寻找的是 height: auto; 而不是 100%。

关于html - 我如何将所有内容放入 html 和 body,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44273679/

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