gpt4 book ai didi

html - 100% 高度离开页面几个像素?

转载 作者:技术小花猫 更新时间:2023-10-29 12:01:13 27 4
gpt4 key购买 nike

我正在尝试使一个框的高度达到页面的 100%。但在 Chrome 和 IE 中,以下内容都超出了页面底部的几个像素,所以我必须滚动。为什么?为什么这里有滚动条?

  <!doctype html>
<html >
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
div {
border:5px solid black;
height: 100%;
}
</style>
</head>
<body >
<div >This flows a few pixels off the bottom of the page</div>
</body>
</html>

最佳答案

它离开页面几个像素,因为您包含了一个 5 像素的边框。 div 的主体是页面高度的 100%,但 border 位于其之外,在 100% 高度旁边为页面增加了 10px 的总高度。因此,在 1000 像素的页面上,您的 div 的高度将为 1010 像素。移除边框,高度就会恰到好处。

div {
height: 100%;
}

如果您仍然想要边框,但不需要额外的高度,您可以使用 box-sizing: border-box 属性将其放置在 div 的边界内

div {
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

关于html - 100% 高度离开页面几个像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32447478/

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