Question

我有一个项目，我无法在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充满时它会停止扩展..

我的目标是，

使身体和html高度100％/不使用vh。
并且不会溢出身体，或者html
在添加子元素时，我希望从html到body的所有内容都动态扩展，而不是在外面溢出或相互重叠..
身体应该在html里面，div应该在体内。

请帮忙。

Answer 1

这就是发生的情况，CSS正在计算100％的宽度和高度，然后它会添加一个10px / 5px的填充，之后会导致元素溢出10 / 5px。您可以通过在代码开头添加以下css来更改此内容：

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

这将确保在100％宽度和高度中考虑填充。希望这个有效！
修改：
此外，您在html和body样式中寻找的内容是height: auto;而不是100％。

Answer 2

如果发生这种情况，则意味着您在设置工作表时不会关注CSS框模型。你也可以使用CSS的box-sizing属性。

考虑一个例子

<div id="frame">This is the frame
</div>

然后使用box-sizing属性并将其值设置为border-box。

<style>
#frame{  width: xx% height:yy%; box-sizing:border-box; }
</style>

我如何适应html和body中的所有内容

2 个答案: