我正在开发一个Web项目，需要设计一个HTML页面。我想将元素的高度设置为百分比，以使其更适合页面。
当我在CSS中使用float并设置：
body, html{
height: 100%;
width: 100%
}
它不适用于身高。我通过改变position而不是使用浮动来暂时修复它。我想为什么它不起作用。任何人都可以帮助我？
这是错误的代码：
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
</body>
</html>排除上述代码，结果如下：detail image
它不应该出现在底部的白色部分。
你的三个div每个都有1个视口高，但是#test3 div是内联块，因此它会创建一个它所在的行框。所有线框都包含一个支柱，其基线与#test3 div的底部垂直对齐，并且支柱的下降部分在此下方垂下。创建垂直滚动条以将文档显示在支柱的底部，将附加高度显示为白色间隙。
要修复，只需通过制作#test3 div #test3来分离支柱的垂直对齐，从vertical-align:top div的垂直对齐。
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
vertical-align:top;
} <div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>添加一个空块级元素并使用clear：both;在父元素结束之前，它保存了浮动元素，现在这个是清除浮动元素的廉价解决方案，它将为你完成工作但是，我建议不要使用它。
来自here
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}
.clear {
clear: both;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
<div class="clear"></div>
</body>
</html>这有用吗？我没有看到问题或者可能没有正确理解它