gpt4 book ai didi

html - 为什么当 body.height=100% 时,带有单个 p 的 html 会弹出滚动条

转载 作者:行者123 更新时间:2023-12-02 21:22:48 30 4
gpt4 key购买 nike

此 html 会导致出现垂直滚动:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body, html {
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>some text</p>
</body>
</html>

代码笔:http://codepen.io/anon/pen/mykna

根据我的推理,单个 p 元素不会导致主体变得比 100% 高度设置时的尺寸更大。然而事实是,p 的大小扩大了主体,其大小增加了。为什么?

我在当前的 Chrome、FF、IE 中对此进行了测试,(幸运的是)所有这些都是相同的,并显示了垂直滚动条,Codepen 也显示了滚动条。

编辑

删除高度并设置 min-height:100% 和 max-height:100% 会导致我预期的行为,不会出现滚动条。这也让我思考,因为在我简单的头脑中,min=max=100% 应该与 height=100% 相同。

最佳答案

因为margin collapsing您可以将 display:inline-block; 添加到 p 中,如下所示:

<强> DEMO

p {
display:inline-block;
}

为了解释边距折叠行为,我创建了一个演示,在该演示中,p 标签的顶部和底部边距为 50 像素,body 具有轮廓。正如您所看到的,p 标记边距折叠并应用于 body,这会强制正文从下方 50 像素开始。

JSFiddle - DEMO

body, html {
height:100%;
margin:0;
padding:0;
}
body {
outline: solid;
outline-color: #F00;
outline-width: 5px;
}
p {
margin: 50px 0px;
background-color: #ADFF2F;
}
<p>My Text</p>

关于html - 为什么当 body.height=100% 时,带有单个 p 的 html 会弹出滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26356694/

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