HTML CONTENT min-height:100%

Question

Can someone explain why min-height:100% on the #content <div> is not working?

Below is the CSS style:

body {
    margin:0;
    padding:0;
}
ul {
    background-image:url(../../globavailable/images/headers/nav2.png);
    height:50px;
    width:100%;
    margin:0;
    padding:0;
    top:0;
    position:fixed;
}
li {
    float:left;
    list-style-type: none;
}
.listclass {
    color:#4571C3;
    padding-left:28px;
    padding-right:28px;
    text-decoration:none;
    line-height:47px;
    font-size:16px;
    background-image:url(../../globavailable/images/headers/line2.png);
    background-repeat: no-repeat;
    display:block;
}
.listclass:hover {
    color:white;
    background-color:#4571C3;
    /*font-weight:bold;*/
}
ul input[type="text"] {
    margin-top:12px;
    margin-left:210px;
    border: 2px solid silver;
    font-family: sans-serif;
    font-size: 14px;
}
#content {
    width:65%;
    min-height:100%;
    height:auto;
    margin-left: auto;
    margin-right: auto;
    border-right: 1px dashed #D0D0D0;
    border-left: 1px dashed #D0D0D0;
}
#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height:50px;
    color:white;
    font-weight:border 2px;
    text-align:center;
    background-color:black;
    vertical-align: middle;
    line-height: 50px;
    /* the same as your div height */
}
.submit-class {
    border-radius: 5px;
    border: 0;
    width: 80px;
    height:25px;
    font-weight:bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size:14px;
    background: #088A29;
}
.submit-class:hover {
    background: #58FA58;
}

Below is the main body HTML:

<nav>
    <ul>
        <li><a href=""><img src="../../globavailable/images/z.png" alt="Smiley face" height="47" width="57"></a></li>
        <li><a href="#" class="listclass">Home</a></li>
        <li><a href="#" class="listclass">Blog</a></li>
        <li><a href="events" class="listclass">Events</a></li>
        <li><a href="#" class="listclass">Contact Us</a></li>
        <li><a href="myprofile" class="listclass">Members</a></li>
        <li><a href="members" class="listclass">My Profile</a></li>
        <li><a href="logout" class="listclass">Logout</a></li>
        <li><input type="text" placeholder="Search..."></li>
    </ul>
</nav>
<br>
<div id="content"></div>
<!-- content -->


</div> <!-- content -->

 <div id="footer">All rights reserved @Chrys</div>

</body>
</html>

Answer 1

You need the parent element to have a size.

Add:

html, body{
    height:100%;
}

Without that, the child element doesn't know what 100% height means, as in size = 100% of undefined.

HTH, -Ted

Answer 2

You need to set the height of the html and body tags to 100% in order for this to work.

html, body {
      height:100%
}

Answer 3

身高必须为100％-内容区域之外的任何内容都会影响这一点。

Answer 4

A div without content with a percentage of height will not have any visual existence on the page. You need to either make it a set height, have the parent have a height (body) or set height (other div) or put content in it that equals 100% of the height you want to see.