Question

我正在尝试使用带有以下代码的CSS进行浮动布局

<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'获得的元素多于另一个时，它们当然应该是相同的高度。

我很感激帮助。

Answer 1

当你想要并排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>

浮动布局不会覆盖所有屏幕

1 个答案: