所以我一直在尝试使用 div，试图掌握整体页面布局的诀窍。我在所有这些上都设置了 1px 的边框，这样我就可以看到我的 css 是如何影响它们的。我只是有点困惑。我知道将任何属性设置为百分比会使该属性根据其容器的大小进行计算。 (如果我错了，请纠正我。我仍在学习所有这些。)
但就 div 高度而言，我认为将其设置为百分比(没有容器)会使高度取决于内容，因为您从未指定过高度。但是，我将一个 div 高度设置为 100%，它似乎具有预定高度。我会发布代码。
HTML 忽略脚本链接。一旦我很好地掌握了布局方面的知识，我就会转向 Javascript。
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="scripttwo.js"></script>
<link type="text/css" rel="stylesheet" href="styletwo.css"/>
<title>Messing With Div's</title>
</head>
<body>
<div id=one></div>
<div id=two></div>
<div id=three>
<div id=four></div>
<div id=five></div>
<div id=six></div>
</div>
</body>
</html>
CSS
body
{margin:0px;}
div
{border:1px solid black;
box-sizing:border-box}
#one
{width:96%;
height:100px;
margin:auto;
margin-top:30px}
#two
{width:40%;
height:500px;
margin-left:2%;
margin-top:2%;
display:inline-block;
margin-bottom:30px}
#three
{width:54%;
margin-top:2%;
margin-right:2%;
display:inline-block;
float:right}
#four
{width:90%;
height:20%;
margin:auto;
margin-top:10%;
border:1px solid red;
display:static}
#five
{width:90%;
height:20%;
margin:auto;
margin-top:10%;
border:1px solid red;
display:static}
#six
{width:90%;
height:20%;
margin:auto;
margin-top:10%;
margin-bottom:10%;
border:1px solid red;
display:static}
最佳答案
#one 和 #two 显然分别具有 100px 和 500px 的预定高度。
#three 一开始没有任何高度，因为里面什么都没有，而且 css 或 html 中也没有设置高度。但是，当您将下面的三个 div 添加到其中时，它的高度将为 2px + margin-top + margin - 其中三个 div 的底部...
#four、#five 和#six 的高度应仅为 2px。因为它们里面什么都没有，而且它们的高度是#three 的 20%(即 0)，所以 20% 是 0。边框在 div 的每一侧增加 1px，所以顶部和底部增加了高度。所以就像我说的，每个都有 2px 的可见高度。
关于html - 基于百分比的元素高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20753374/