内容div没有填满剩余空间

Question

基本上，#content不遵循height：auto属性。

我究竟做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title>
    <style type="text/css">
        #container
        {
            background-color: White;
            height: 100%;
            min-height: 100%;
            min-width: 600px;
            width: 100%;
        }
        #header
        {
            height: 50px;
            overflow: hidden;
            width: 100%;
        }
        #headerLeft
        {
            background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg');
            float: left;
            height: 50px;
            width: 5px;
        }
        #headerCenter
        {
            background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg');
            float: left;
            height: 50px;
            width: 99.2%;
        }
        #headerRight
        {
            background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg');
            float: left;
            height: 50px;
            width: 5px;
        }
        #menu
        {
            background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg');
            height: 20px;
            width: 100%;
        }
        #content
        {
            background-color: Pink;
            height: auto;
            width: 100%;
        }
        #footer
        {
            height: 40px;
            overflow: hidden;
            width: 100%;
        }
        #footerLeft
        {
            background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg');
            float: left;
            height: 40px;
            width: 5px;
        }
        #footerCenter
        {
            background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg');
            float: left;
            height: 40px;
            width: 99.2%;
        }
        #footerRight
        {
            background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg');
            float: left;
            height: 40px;
            width: 5px;
        }
        * html #container
        {
            height: 100%;
        }
        *
        {
         margin: 0;
         padding: 0;
        }
        html, body, form
        {
         border: none;
         height: 100%;
        }
    </style>
</head>
<body>
    <form id="form" runat="server">
    <div id="container">
        <div id="header">
            <div id="headerLeft"></div>
            <div id="headerCenter"></div>
            <div id="headerRight"></div>
        </div>
        <div id="menu"></div>
        <div id="content"></div>
        <div id="footer">
            <div id="footerLeft"></div>
            <div id="footerCenter"></div>
            <div id="footerRight"></div>
        </div>
    </div>
    </form>
</body>
</html>

有任何想法吗？

Answer 1

自动已经是默认值。
块级元素不会拉伸以填充父级的高度。
因此，该div不应该延伸-是吗？ （也许请参见块级元素的高度计算）
这意味着是被服从的height:auto属性。

也许您可以使用position: absolute; bottom: 10px; position: absolute; bottom: 10px; 在页脚上，在内容上留有下限。
背景可能很棘手-也许您可以为所有正文提供“粉红色”背景，而标题和菜单则为白色。

内容div没有填满剩余空间

问题描述

1 个解决方案

解决方案1
0 已采纳 2010-03-19 14:10:15

内容div没有填满剩余空间

问题描述

1 个解决方案

解决方案1 0 已采纳 2010-03-19 14:10:15

解决方案1
0 已采纳 2010-03-19 14:10:15