CODEWITHSUNDEEP
htmlcss
Max
Max

Reputation: 367

height 100% overlapping parent

I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.

It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?

<html>
<body>
    <div id="app">
        <nav id="nav"></nav>
        <header class="header"></header>
        <div class="categories"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>

This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.

Upvotes: 0

Views: 649

Answers (1)

Jo&#227;o Pedro S&#225; Medeiros
Jo&#227;o Pedro S&#225; Medeiros

Reputation: 278

You could try using 

overflow: auto

Would be nice to have some code example so we can help more.

Upvotes: 1

Related Questions