Body not expanding to 100% height

Question

I'm trying to set the body height to 100%, which seems like a pretty standard thing that to do. I've done is a thousand times without a problem, but for some reason it's just not working here. I have this login page and the body has only one child div whose position is not absolute (there are two other divs with absolute positions. It's driving me nuts. I've Googled/StackOverflowed this and every post I've come across says the same thing: set height to 100%. I've also tried setting min-height: 100% but nothing works. If I set height: 600px the height expands, but not for a percentage.

Here's a Fiddle that reproduces the problem.

Some other things I've tried include changing the position and display of the body, without success.

Update

OK, so I just checked my Fiddle again and I guess it's not reproducing the problem I'm having, so I'm attaching a screenshot to demonstrate the issue. As you can see, the body height is not 100%. I've set the height of html to 100%.

Possible duplicate of [height:100%; not working](http://stackoverflow.com/questions/7049875/height100-not-working) — Stefan Neuenschwander, Jan 19 '16 at 14:16
This is NOT a duplicate. Similar problem but I've tried all the solutions suggested in other discussions on this without success. — Daniel Bonnell, Jan 19 '16 at 14:26
Everything is working fine. Can you please tel me, what exactly you want? Do u want to align login block on the center of the screen? — Ajay Malhotra, Jan 19 '16 at 14:26
The login box should be vertically centered, yes, but that's not the problem I'm having. The problem is I can't vertically center is because the *body height isn't 100%*. Also, Rob, it might not be to specs, but you can put script tags right before the closing body tag so that they don't prevent the browser from rendering the rest of the DOM while they're evaluated. I've been doing it for years without incident. — Daniel Bonnell, Jan 19 '16 at 14:28
Set the login box container to 100% height as well as body and html, or simply use 100vh on that box directly. — Stickers, Jan 19 '16 at 14:30
Pangloss: That does nothing because the height of the parent element `body` is not 100%. Using `vh` units doesn't work either. In any case, that element is not supposed to be 100% of the height. — Daniel Bonnell, Jan 19 '16 at 14:32
Height 100% takes the height of the parent, setting the 100% height on the body doesn't do anything because the HTML has no height. So setting min-height: 100% !important; height: 100%; on the HTML should work. If not, there's another problem. — Stefan Neuenschwander, Jan 19 '16 at 14:35
Pangloss: That works but only in the Fiddle, not when I test it live. Stefan: Ok, that solves the problem. But I don't understand why. I've tried setting the height and min-height property on `html` (including tagging them `!important`) before and it didn't work. Why do I need both? — Daniel Bonnell, Jan 19 '16 at 14:41

score 1 · Answer 1 · answered Jan 19 '16 at 14:16

1

Your fiddle works without the bug for me using Firefox 43, what's your browser? You can also try to set html to 100%: html { height: 100%; }

answered Jan 19 '16 at 14:16

Fla

536
6
23

Just tried that and it didn't work for me: [Fiddle](https://jsfiddle.net/8kLrarLh/14/). I'm on Chrome 47 on OS X – Daniel Bonnell Jan 19 '16 at 14:17
Just checked on firefox 38 on OS X and it's not working there either. – Daniel Bonnell Jan 19 '16 at 14:18
@ACIDSTEALTH This is the reason I don't like fiddles. You should post a minimal example of your markup here that we can more easily copy/paste. This answer is typically the solution to this problem. – Rob Jan 19 '16 at 14:31
on firefox backgroud color covers teh whole page, basically behaving as it should but when you hover on body in fire bug it is not covering the page and looks liked the photo posted – Daniel PurPur Jan 19 '16 at 14:52

score 1 · Answer 2 · edited Apr 06 '16 at 17:46

Check this snippet. it's working fine.

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>

Well this doesn't answer my original question, but it addresses the problem I'm trying to solve (centering the login box). If no on else solves the body height issue in the next few hours I'll mark it as the answer. Thanks! — Daniel Bonnell, Jan 19 '16 at 14:37

Zainul Abideen · Answer 3 · 2022-06-28T09:24:55.877

I think You Are not Using <!DOCTYPE html> tag at the top of your html code.Try This Code Given Below. I Am Sure It Will Work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>your title</title>
    <link rel="stylesheet" href="style.css">
</head>

body {
  width: 100%;
  height: 100%;
}

Body not expanding to 100% height

3 Answers3