Safari：高度：100% 未执行

Question

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

我试过了： 1.更改为最小高度：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 为单位。

Answer 2

尝试使该属性 !important 或内联

或 增加特异性 虽然在 css 中使用 ID 进行样式设置不是一个好主意，但您可以尝试一下

Answer 3

单位 vh 在 safari 中不起作用，将其更改为 % 或 px ，它将完美地工作

Answer 4

请检查以下内容，您必须在 % 中设置 Div Tag 所需的高度

#signup-login-forms { 宽度：100%;高度：100%；背景颜色：#161618；边距：4em 0 0 0；文本对齐：居中； }