Question

我有一个网页index2.html，其高度为100％。它有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％时，我不明白为什么有一个垂直滚动条。为什么会这样？我该如何解决这个问题？

＆＃13;

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;
}

＆＃13;

<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>

＆＃13;

JSFIDDLE

Answer 1

有两个原因

正文具有您需要使用body {margin:0}
另一个问题是您的边框会影响元素的大小并增加高度。您可以通过添加div {box-sizing:border-box}

<强> jsFiddle example

Answer 2

你的例子中的问题是身体边缘（在大多数浏览器中是默认的）以及使div宽度为100％+ 2像素（左右边框）的边框，高度受到同样的影响。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#div_header {
  width: 100%;
  height: 20%;
  background-color: blue;
}

#div_middle {
  width: 100%;
  height: 70%;
  background-color: red;
}

#div_footer {
  width: 100%;
  height: 10%;
  background-color: green;
}

<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>

修改

是的，你也可以在你的CSS中设置box-sizing:border-box;以适应100％div中的边框。将margin: 0;设置为<body>元素，这将是解决问题的正确方法。

您还可以阅读有关框大小调整here
的信息

html, body { height: 100%; margin: 0; padding: 0; } div { box-sizing: border-box; } #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>

Answer 3

就我而言，

* {
     overflow: hidden;
  }

这行得通。

Answer 4

滚动条的原因是因为您没有考虑盒子模型。百分比不考虑边际或边界。因此，通过添加1 px边框而不删除边距，百分比将使视图屏幕上的框稍微高一些。

试试这个。

*{
	margin: 0;
	
}
html, body {
   height: 100%;
}

#div_header {
    width: 100%;
    height: 20%;
	background-color: #23408;
}

#div_middle {
    width: 100%;
    height: 70%;
	background-color: #444;
}

#div_footer {
    width: 100%;
    height: 10%;
	background-color: #123854;
}

当高度为100％时，为什么会出现垂直滚动条？

4 个答案: