Question

我有一个signup-login-forms div，其测量值为40vh，浏览器宽度为100％。在那个div里面，我有两种形式坐在一起。我希望两个表单的高度都是signup-login-forms div的100％。它适用于FireFox和Chrome，但不适用于Safari（我使用v 7.0.6）。形式＆＃39;身高只有表格的高度。内容。以下是尝试的解决方案和源代码的列表。提前感谢您提供的任何帮助！

我试过了： 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

尝试制作该属性！重要或内联

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

Answer 3

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

Answer 4

请检查以下内容，您必须在％

中设置Div Tag所需的高度

＃signup-login-forms {width：100％;身高：100％; background-color：＃161618;保证金：4em 0 0 0; text-align：center; }

safari：height：100％不执行

4 个答案: