我正在尝试通过以下代码使用 CSS 制作 float 布局
<html>
<head>
<link rel="stylesheet" type'text/css" href="styles.css">
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
<div id="content">
<h1>content</h1>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
以及关联的 CSS 代码:
#header
{
float: left;
background-color: #EAE5DF;
width: 80%;
height: 175px;
}
#authentification
{
width: 20%;
height: 175px;
background-color: #8A5D1D;
float: right;
}
#cart
{
width: 20%;
min-height: 400px;
background-color: #861825;
float: right;
}
#content
{
width: 80%;
min-height: 400px;
background-color: #EAE5DF;
float: left;
overflow: hidden;
}
#footer
{
width: 100%;
min-height: 50px;
background-color: #8A5D1D;
clear: both;
display: table;
}
现在的问题是上面的代码显示了本应显示的 div，但在底部留下了一个空白区域。
我想做的是弄清楚如何通过以下方式摆脱空白: 1)在页面底部有页脚 2) 当 div 'content' 或 'cart' 获得的元素多于另一个时，它们当然应该具有相同的高度。
非常感谢帮助。
最佳答案
当你想并排放置 div 时，使用 float 并不是一个好的选择，而是使用 flex。
.wrapper{display: flex;}
#authentification, #cart{width:20%; background-color: #bbb;}
#header, #content{flex: 1; background-color: #eee;}
#footer{background-color: orange;}
h1{margin: 0;}<div class="wrapper" style="height:100px;">
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
</div>
<div class="wrapper" style="height: calc(100vh - 150px);">
<div id="content">
<h1>content</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
</div>
<div id="footer" style="height: 50px;">
<h1>footer</h1>
</div>关于html - float 布局不会覆盖所有屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43030989/