页面元素后面的白色方块！ （不是身体）

Question

好的，建立一个帐户页面，并使用与构造页面时通常使用的相同方法，似乎会出现一个问题，就像背景中有一个大的白色块/空格，因此本质上是某种元素或div具有白色背景色。唯一的问题是，没有什么原因会引起这种情况，而且肯定不是身体。

See image （除了一些小细节，由于此问题工作已经停止，因此尚未完成！）

帐户和操作按钮元素（列）应该具有白色背景，而这两个div后面的背景应为绿色。我们以为这就是身体。

body {
    font-family: 'nunito', sans-serif;
    /*width: 100%;*/
    height: 100%;
    background-color: #049E84 !important;
    overflow: hidden;
    align-content: center;
    float: inherit;
    margin-top: 0;
}

#account {
    margin-top 100px;
    padding: 50px;
    margin-bottom: 100px;
    /*	font-family: 'nunito', sans-serif; */
    /*	float: inherit;*/
    /*	width: 70%;*/
    /*	margin-left: 19%;*/
    /*	margin-top: 0;*/
    align-content: center;
    background-color: #049E84;
}

#info {
    text-align: center;
    width: 60%;
    height: 75%;
    background-color: white;
    padding: 25px;
    font-family: 'nunito', sans-serif;
    font-size: 35px;
    color: dimgrey;
    float: left;
    border-radius: 60px;
}

#operativeButtons {
    text-align: center;
    padding: 25px;
    margin-left: 30px;
    background-color: white;
    border-radius: 60px;
    width: 15%;
    height: 75%;
    float: right;
}

#yourAccount {
    font-family: 'nunito', sans-serif;
    font: bolder;
    color: #282828
}

#valid {
    color: grey;
    padding-top: 20px;
    font-weight: bold;
}

#tickets {
    color: #049e84;
}

#warning {
    color: #ff0000;
}

#uname {
    display: inline;
}

p {
    line-height: 1;
}

.title {
    padding-top: 10px;
    color: black;
}

#bg {
    background-color: #049e84;
}

<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<div id="bg">
    <div id="account">
        <div id="info">
            <div id="yourAccount">
                YOUR ACCOUNT</div>
            <hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />

            <p class="title">Username:</p>
            <p id="username" class="details"></p>

            <p class="title">Name:</p>
            <p id="name" class="details"></p>

            <p class="title">Email:</p>
            <p id="email" class="details"></p>

            <p class="title">Phone:</p>
            <p id="phone" class="details"></p>

            <p class="title">Address:</p>
            <p id="address" class="details"></p>

            <p class="title">Your Tickets:</p>
            <p id="tickets" class="details"></p>

            <p id="valid"></p>
            <hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
        </div>
        <div id="operativeButtons">
            <p id="home">Home</p>
            <p id="logout">Logout</p>
            <p id="deleteaccount">Delete Account</p>
            <p id="warning">WARNING:</p>
            <p id="warningmessage">Deleting your account will entirely erase all your data from our database. By
                clicking, you acknowledge this. <br> All tickets will be erased</p>
        </div>
    </div>
</div>

请注意上面的代码中html和body标记在PHP之后被关闭，这不是问题。 ：）

任何帮助将不胜感激，我完全感到困惑！话虽这么说，我也很累。

Answer 1

看起来您缺少浮点数，这就是为什么父元素（2018 ）不能达到预期高度的原因。

您可以使用以下明确的修补程序：

#account

更多信息在这里：

https://css-tricks.com/snippets/css/clear-fix/

另一种肮脏的方法是添加#account:after { content: ""; display: table; clear: both; } 。在关闭<br clear="all"/>之前。