文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将html和body中的所有内容都匹配起来？

问如何将html和body中的所有内容都匹配起来？
EN

Stack Overflow用户

提问于 2017-05-30 23:58:23

回答 1查看 1.1K关注 0票数 0

我有一个项目，我有困难，以适应所有的内部body。子元素总是在body之外，当我看我的代码时，它看起来不错，所以我做了一个实验；我通过给它们一个边框来跟踪每个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*/

Output：所有东西都溢出到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*/

Output：所有东西都符合html，但并不占据屏幕的全部高度。我知道我可以让身体min-height: 100vh..。但当100 is满时，它将停止扩张。

我的目标是

使身体和html 100%的高度/不使用vh。
而不溢出身体外，或html。
当添加子元素时，我希望从html到body的所有东西都能动态地扩展高度，而不是溢出或重叠。
主体应该在html中，div应该在体内。

请帮帮忙。

html

css

回答 1

Stack Overflow用户

发布于 2017-05-31 04:28:22

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

考虑一个例子

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

然后使用框大小属性并将其值设置为边框。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44273679

复制

相似问题

问如何将html和body中的所有内容都匹配起来？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将html和body中的所有内容都匹配起来？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将html和body中的所有内容都匹配起来？
EN