如何适应HTML和正文中的所有内容

我有一个项目，并且我在body中遇到了麻烦。子元素总是在body之外，当我看着我的代码时，它看起来没问题，所以我做了一个实验;我通过给他们一个边界来追踪每个HTML元素，以便我可以直观地看到他们的行为方式。这是我迄今为止所拥有的。如何适应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身体高度扩展动态，而不是去外面溢出，或相互重叠..
身体要在html里面，div应该在body里面。

请帮忙。

来源

2017-05-30 Marven Wilson S Donque

注意你的语言。这不是reddit。 – Rob

这就是发生了什么，CSS正在计算100％的宽度和高度，然后它添加了10px/5px的填充，之后导致元素溢出10/5px。您可以通过在你的代码的开头添加以下CSS改变这一点：

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

这将确保填充在100％的宽度和高度入账。希望这个作品！
编辑：
此外，您在html和body风格要找的是不是height: auto; 100％。

来源

2017-05-31 00:05:04

在您的第一次css尝试中使用此代码。 –

您还需要记住默认情况下所有内容都有余量和填充，并且您需要添加'* {margin：0; padding：0}'作为你的css的第一行。这应该摆脱你的溢出。 –

如果发生这种情况，这意味着您在设计工作表时没有遵循CSS框模型。你也可以使用CSS的box-sizing属性。

考虑一个例子

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

然后使用箱式施胶性和其值设置为边界框。

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

来源

2017-05-31 04:28:22

如何适应HTML和正文中的所有内容

回答

相关问题