身体没有扩大到100％的高度

Question

我试图将body高度设置为100%，这似乎是一件非常标准的事情。我已经完成了一千次没有问题，但由于某种原因，它只是不在这里工作。我有这个登录页面，body只有一个孩子div，其位置不是absolute（还有两个其他div absolute位置。它的驾驶我疯了。我用谷歌搜索/ StackOverflowed这个和我遇到的每个帖子说同样的事情：设置高度为100％。我也试过设置min-height: 100%但没有任何作用。如果我设置height: 600px高度扩展，但不是百分比。

这里有一个Fiddle来重现问题。

我尝试过的其他一些事情包括改变身体的位置和显示，但没有成功。

更新

好的，所以我再次检查了我的小提琴，我猜它没有重现我遇到的问题，所以我附上了截图来证明这个问题。如您所见，body高度不是100％。我已将html的高度设置为100％。

Answer 1

你的小提琴没有使用Firefox 43的bug，你的浏览器是什么？ 您还可以尝试将html设置为100％：html { height: 100%; }

Answer 2

检查此代码段。它工作正常。

body {
    background: #333;
    color: #344b59;
    margin-top: initial;
    height: 100%;
}
input {
    width: 100%;
}
.static-content {
    justify-content: center;
align-items: center;
display: flex;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.content-area {
    padding: 10px 25px 25px 25px;
    width: 520px;
    border: 2px solid #CCC;
    border-radius: 3px;
    background: #FFF;
}
.login-btn {
    width: initial;
    float: right;
    margin-top: 10px;
}
.remember-me {
    float: left;
}
.login-left-panel {
    height: 175px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #CCC;
    font-size: 1.25em;
    color: gray;
}

<div class="static-content form-page">
    <div class="content-area">

        <div class="row">
            <div class="col-lg-6">
                <div class="login-left-panel">
                    <div>
                        Welcome Back!
                        <br />
                        <br />
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <h4>Sign in</h4>
                <form accept-charset="UTF-8" action="/employers/sign_in.employer" class="new_employer" id="new_employer" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="+5fzNEj8kLf6+uCr4ArESR9qFzszJZRvq6CyGdsFRY8=" /></div>
                <div class="form-input">
                    <div class="form-field-group">
                        <div class="form-label">EMAIL ADDRESS</div>
                        <input autofocus="autofocus" class="text-field" id="employer_email" name="employer[email]" type="email" value="" />
                    </div>

                    <div class="form-field-group">
                        <div class="form-label">PASSWORD</div>
                        <input class="text-field" id="employer_password" name="employer[password]" type="password" />
                    </div>

                    <div class="btn remember-me"><input name="employer[remember_me]" type="hidden" value="0" /><input class="check-box" id="employer_remember_me" name="employer[remember_me]" style="width: 15px;" type="checkbox" value="1" /> <label for="employer_remember_me">Remember me</label></div>
                    <input class="btn btn-primary login-btn" name="commit" type="submit" value="Sign in" />
                </div>
</form>            </div>
        </div>
    </div>
</div>