gpt4 book ai didi

html - 为什么高度为100%时出现垂直滚动条?

转载 作者:行者123 更新时间:2023-11-28 04:30:25 27 4
gpt4 key购买 nike

我有一个高度为 100% 的网页 index2.html。它有 3 个 div:第一个高度为 20%,第二个高度为 70%,第三个高度为 10%。

这是它的全部 HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
}

#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}

#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}

#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}

</style>
</head>
<body>
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
</body>
</html>

当我在浏览器(IE 11 和 Chrome)上显示网页时,出现垂直滚动条。我不明白为什么当页面高度设置为100%并且3个div(20% + 70% + 10%)的高度之和也为100%时,为什么会有垂直滚动条。为什么会这样?我该如何解决这个问题?

html, body {
height: 100%;
}

#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}

#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}

#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>

JSFIDDLE

最佳答案

有两个原因

  1. 正文有一个默认边距,您需要使用 body {margin:0}
  2. 消除它
  3. 另一个问题是您的边框会影响元素的大小并增加高度。您可以通过添加 div {box-sizing:border-box}
  4. 来解决这个问题

jsFiddle example

关于html - 为什么高度为100%时出现垂直滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37305386/

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