CODEWITHSUNDEEP
htmlcss
Daniel Bonnell
Daniel Bonnell

Reputation: 4997

Body not expanding to 100% height

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%. enter image description here

Upvotes: 1

Views: 2304

Answers (3)

Zainul Abideen
Zainul Abideen

Reputation: 1

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

Upvotes: 0

Ajay Malhotra
Ajay Malhotra

Reputation: 838

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>

Upvotes: 1

Fla
Fla

Reputation: 627

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

Upvotes: 1

Related Questions