The height:100% just does not seem to work no matter what element I apply it to

Question

So I'm in the process of making a very simple landing page using just html and css with bootstrap, and I've been trying to have a background image that covers 100% of the available browser window, and I've tried wrapping it in a class="wrapper" tag and also applying "height:100%" to many different elements but the image just does not extend beyond the last html element in the body.

Edit: spelling

The main markup:

    <body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">PURFFECT MATCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Signup</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="centering">
                    <h1>Purrfect Match</h1>
                    <h3>Matching felines in need to human caretakers</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https:code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

All the CSS I've applied:

    .centering {
    text-align: center;
    padding-top: 25%;
    height: 100%;

}
body {
    padding-top: 140px;
    height:100%;
}
.wrapper {
    height: 100%;
    width: 100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
}
h1 {
    height: 100%;
}

what the webpage looks like

score 2 · Accepted Answer · answered May 26 '20 at 16:47

2

In order for height:100% to work, it needs to be in a container with an explicitly defined height (eg: 100px). This can be a distant ancestor if the ancestors between also have percentage heights.

If you want it to be 100% of the viewport, try 100vh instead.

answered May 26 '20 at 16:47

Tom Pietrosanti

4,184
2
24
29

Damn, the 100vh tip works perfectly. Thanks! – BaamAhmed May 26 '20 at 16:59
Don't forget to mark the answer as Accepted @BaamAhmed https://stackoverflow.com/help/someone-answers – gael May 26 '20 at 17:07

score 0 · Answer 2 · answered May 26 '20 at 16:46

Why not just add it to the body? Like this:

body {
    padding-top: 140px;
    height:100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover; 
}

Here's an example:

 .centering {
    text-align: center;
    padding-top: 25%;
    height: 100%;

}
body {
    padding-top: 140px;
    height:100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
 
}
.wrapper {
    height: 100%;
    width: 100%;
}
h1 {
    height: 100%;
}

   <body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">PURFFECT MATCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Signup</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="centering">
                    <h1>Purrfect Match</h1>
                    <h3>Matching felines in need to human caretakers</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</div>

I did try that as well, but the result was the same background that was cut off about halfway down the screen. — BaamAhmed, May 26 '20 at 17:00
Ah ok, well the 100vh answer is the one you're probably looking for then. — John, May 26 '20 at 17:01

The height:100% just does not seem to work no matter what element I apply it to

2 Answers2