body {
background-color: blueviolet;
}
.leftcolumn {
width: 30%;
height: 100%;
float: left;
background-color: brown;
}
.middlecolumn {
float: left;
background-color: yellowgreen;
width: 60%;
height: 100%;
}<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>我正试图使三列彼此相邻，同时高度为100%。
我想问题是我用了'float: left;'，但我不知道我应该用什么。
由于左列和中间列都是div，它将默认为display: block，您需要将其覆盖为display: inline-block以调整在同一行
除了列是采取100%的高度，我已经尝试给100vh的身体，所以它是按预期工作。
body {
background-color: blueviolet;
height: 100vh;
}
.leftcolumn, .middlecolumn {
height: 100%;
display: inline-block;
}
.leftcolumn {
width: 30%;
background-color: brown;
}
.middlecolumn {
background-color: yellowgreen;
width: 60%;
}<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>列不是完全高度的原因是因为您使用了height: 100%在
列上它继承了父元素的全部高度，在本例中，父元素是body，为了简单地解决这个问题，可以在body中添加一个高度，如下所示:
body {
background-color: blueviolet;
height: 100vh;
margin: 0;
}
Margin: 0是否有不使页面溢出
这是因为你必须在html, body中添加height。你可以在css中使用这个代码吗，它会工作的。
身体,html}{高度:100%;