safari: height:100% not executing

Question

I have a signup-login-forms div measuring 40vh and 100% of the browser width. Inside of that div I have two forms sitting next to each other. I want both forms to have a height of 100% of the signup-login-forms div. It works in FireFox and Chrome, but not Safari(I'm using v 7.0.6). The forms' height is only as tall as the forms' content. Below is a list of attempted solutions and the source code. Thanks in advance for any help you guys can offer!

I've tried: 1. changing to min-height:100%. 2. setting height:auto. 3. removing box-sizing:border-box.

Here's my 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>

And the 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%;
}

possible duplicate of [Safari: VH units applied to parent element doesn't allow 100% height in child?](http://stackoverflow.com/questions/24017270/safari-vh-units-applied-to-parent-element-doesnt-allow-100-height-in-child) — Stephan Muller, Sep 22 '14 at 16:59

score 5 · Accepted Answer · answered Sep 19 '14 at 12:37

5

In the #signup-login-forms form, changing height:100%to height:inherit solved the problem. This allows me to keep the height of #signup-login-forms measured in vh.

answered Sep 19 '14 at 12:37

wheresmyspaceship

870
2
12
19

Gee, for some reason in my case, "inherit" was all that I needed. Amazing tiny differences in how browsers handle edge cases (in my case it was a 90 rotated element). Thanks! – Boaz Rymland Feb 20 '20 at 08:16
Thanks! this solved my problem on safari 13 – Kevin Batongbakal Mar 16 '21 at 05:48

score 0 · Answer 2 · answered Sep 18 '14 at 13:04

0

try making that property !important or inline

or increase the specifity though it's not a good idea to use IDs in css for styling but you can give it a try

answered Sep 18 '14 at 13:04

Pratik

337
2
8

unfortunately, none of those suggestions worked. Thanks, nonetheless. – wheresmyspaceship Sep 18 '14 at 13:21

score 0 · Answer 3 · answered Sep 19 '14 at 10:37

0

The unit vh won't work in safari change it to either % or px , and it will work perfectly

answered Sep 19 '14 at 10:37

Pratik

337
2
8

No luck with the %. Pixels work but it's not responsiveness, which was my aim when deciding to use % and/or vh; – wheresmyspaceship Sep 19 '14 at 12:17

score 0 · Answer 4 · answered Sep 19 '14 at 12:18

0

Please check below content, you have to set the required height for Div Tag in %

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

answered Sep 19 '14 at 12:18

Pratik

337
2
8

In the context of my source code, that would set the div to 100% of the browser height. Luckily, I found the solution. Keeping the #signup-login-forms div at 40vh and setting the form to height:inherit works like a charm. Thank you for your assistance. – wheresmyspaceship Sep 19 '14 at 12:30

safari: height:100% not executing

4 Answers4