Question

有人可以在min-height:100%＆lt; div＆gt;上解释原因#content吗？不工作？

以下是CSS样式：

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;
}

以下是主体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

您需要父元素具有大小。

添加：

html, body{
    height:100%;
}

没有它，子元素不知道100％高度的含义，因为大小=未定义的100％。

HTH， -Ted

Answer 2

您需要将html和body标签的高度设置为100％才能生效。

html, body {
      height:100%
}

Answer 3

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

Answer 4

没有高度百分比的内容的div在页面上不会有任何视觉存在。您需要将其设置为设置高度，让父项具有高度（正文）或设置高度（其他div），或者将内容放在其中等于您想要查看的高度的100％。

HTML内容最小高度：100％

4 个答案: