Safari：高度：100% 未执行

Question

我有一个signup-login-forms测量 40vh 和 100% 浏览器宽度的div。在那个 div 里面，我有两个相邻的表格。我希望两种形式的高度都是signup-login-formsdiv的 100% 。它适用于 FireFox 和 Chrome，但不适用于 Safari（我使用的是 v 7.0.6）。表单的高度仅与表单的内容一样高。下面是尝试的解决方案和源代码的列表。在此先感谢你们提供的任何帮助！

我试过： 1. 更改为 min-height:100%。2.设置高度：自动。3. 移除 box-sizing:border-box。

这是我的 HTML：

<div id="signup-login-forms">
            <form id="signup-form" name="signup-form" method="POST" action="#">
                <header>
                    <h2>Create account</h2>
                </header>
                <fieldset>  
                    <input type="email" id="userEmail" name="userEmail" required="required" placeholder="email">
                    <input type="email" id="confirmUserEmail" name="confirmUserEmail" required="required" placeholder=" confirm email">
                    <input type="password" id="confirmPassword" name="confirmPassword" required="required" placeholder="create password">
                    <small>
                        <p>By signing up, you agree to our <a href="---">terms and conditions</a>.</p>
                    </small>
                    <button class="form-button"   id="signup-button" type="submit" formmethod="#" formaction="#">Sign up</button>
                </fieldset>
            </form>
            <form id="login-form" name="login-form" method="POST" action="#">
                <header>
                    <h2>Log-in</h2>
                </header>
                <fieldset>
                    <input type="email" id="userEmail" name="userEmail" required="required" placeholder="email">
                    <input type="password" id="password" name="password" required="required" placeholder="password">
                    <div id="checkbox">
                        <input type="checkbox" name="loginPreference" id="loginPreference"><label>Keep me logged in</label>
                    </div>
                    <button class="form-button" id="login-button" type="submit" formmethod="#" formaction="#">Log-in</button>
                </fieldset>
            </form>
        </div>      

和 CSS：

#signup-login-forms {
width: 100%;
height: 40vh;
background-color: #161618;
margin: 4em 0 0 0;
text-align: center;
}

#signup-login-forms form {
height: 100%;
width: 50%;
text-align: center;
}

#signup-form {
float: left;
border-right: 1px solid rgb(53, 53, 53);
box-sizing: border-box;
}

#login-form {
float: right;
box-sizing: border-box;
}

#signup-login-forms form header {
width: 100%;
padding: 5% 0 0 0;
text-align: center;
}

#signup-login-forms header h2 {
color: #e74c3c;
font-weight: normal;
font-size: 2em;
display: inline;
}


#signup-login-forms fieldset {
width: 100%;
}

Answer 1

在#signup-login-forms 表单中，更改height:100%以height:inherit解决问题。这使我可以保持#signup-login-forms以 vh为单位测量的高度。