我需要对此进行解释。我以为我了解CSS；显然我没有流血的线索。
body {
margin:0;
padding:0;
}
#contain{
position: relative;
width: 100%
height: 100%;
}
#wizard{
position: absolute;
left: 5%;
width:10%;
height: 100%;
background-color: black;
}
#main{
position: absolute;
height: 100%;
left: 15%;
border-style: dashed;
border-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script>
//css here, removed for purpose of the question
</script>
</head>
<body>
<div id="contain">
<div id="wizard">
</div>
<div id="main">
</div>
</div>
</body>
</html>这是CSS定位的最基本示例之一，我之前已经使用过很多次。我了解这是“错误的”，但是为什么呢？为什么我只能从左侧看到15％的单个红点（
#main的虚线虚线框），而没有其他显示？ 最佳答案
将body和html的高度设置为100％，这将为您的其他元素提供参考。
您无需将定位元素的高度设置为100％，只需将顶部和底部偏移量设置为0。如果要使用height: 100%，由于边框的缘故，您可能会得到一些额外的高度，并且可以通过指定属性box-sizing: border-box修复该问题。
body {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#contain {
position: relative;
width: 100%;
height: 100%;
}
#wizard {
position: absolute;
top: 0;
bottom: 0;
left: 5%;
width: 10%;
background-color: black;
}
#main {
position: absolute;
top: 0;
bottom: 0;
left: 15%;
right: 0;
border-style: dashed;
border-color: red;
}<div id="contain">
<div id="wizard"></div>
<div id="main"></div>
</div>