页面上元素后面的白色块！（不是Body）

Question

好的，建立一个帐户页面，并使用我们通常在构建页面时使用的相同方法，我们似乎遇到了这个问题，背景中有一个大的白色 block/space，所以本质上是某种具有白色背景颜色的元素或 div。唯一的问题是，没有任何原因会导致这种情况，而且肯定不是 body.

See image （抛开细节不谈，由于这个问题已经停止工作，所以还没有完成！）

帐户和操作按钮元素（列）应该有白色背景，而这两个 div 后面的背景应该是绿色。我们假设这将是 body.

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

看起来您没有清除浮动，这就是父元素 (#account) 未获得预期高度的原因。

您可以使用这样的清除修复：

#account:after {
    content: "";
    display: table;
    clear: both;
}

更多信息在这里：

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

另一种肮脏的方式是添加 <br clear="all"/>。关闭前 #account.

页面上元素后面的白色块！（不是Body）

White block behind elements on page! (Not Body)

html

css

visual-web-developer

页面上元素后面的白色块！ （不是Body）

White block behind elements on page! (Not Body)

html

css

visual-web-developer

页面上元素后面的白色块！（不是Body）