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 :)
1 answers
solution1
5 2014-10-16 15:02:22
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.