No matter what I do, my div doesn't want to be 100% height... :/

Question

Edit: I found out that for some strange reason my #content inherits a height property. I don't know why though, or why that is overwriting the height I am trying to set. :/

I did a lot of research on that, but I am not that good with css yet, so I can not seem to figure it out. I am making a small website for a uni project, and everything works fine, except for one thing. The content div just does not want to fill out the height that I tell it to.

    <body>
    <div id="container">
        <div class="logo"><img src="/Users/sophie/Dropbox/3 Uni/MultiEngI/Aufgabe 1/Acc/ArtArchiveLogo500.png" alt="ArtArchive" /></div>
        <div class="header">ArtArchive</div>
        <div id="nav"><li>
            <ul>
                <a href="#">Upload</a>
            </ul>
            <ul>
                <a href="#">Organize</a>
            </ul>
            <ul>
                <a href="#">Browse</a>
            </ul>
        </li>
        </li></div>
        <div id="content" style="height:100%;">I am empty :(</div>
        <div class="footer">I am empty :(</div>
    </div>  
</body>

that is the html part, and that the css:

    .header {
    background:#c61350;
    height: 100px;
    line-height: 100px;
    text-align: center;
    padding:10px;
}

    .header {
    border-bottom: 12px solid #cd365b;
    color: white;
    font-size: 36px;
    font-family: 'Lato',arial,sans-serif;
    letter-spacing: 50px;
}

    #content {
    height : auto !important; 
    height : 100%;            
    min-height : 100%; 
    background: #fff;
    width: 60%;
    overflow: auto;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#5f4e54;
}

The div with the id content is supposed to be 100% height and it is not. Thank you for reading this :)

Is a space between the property and the colon even valid? eg `height :` — TylerH, Oct 16 '14 at 15:04

score 5 · Answer 1 · edited May 23 '17 at 12:20

You're declaring height : auto !important;. The !important declaration takes precedence over other identical style properties. Simply remove this:

#content {
    height: auto; 
    height: 100%;            
    min-height : 100%; 
    ...
}

Do note though that your #content element will be 100% the height of its #container parent. If your #container element has no height itself, your #content element will also have no height. You may want to use the vh unit instead. If this is the case, please see my other answer here: Make div 100% height of browser window.

No matter what I do, my div doesn't want to be 100% height... :/

1 Answers1