内容 div 未填满剩余空间答案

【问题标题】：Content div not filling up the remaining space内容 div 未填满剩余空间
【发布时间】：2015-01-06 16:47:25
【问题描述】：

基本上#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>

有什么想法吗？

【问题讨论】：

标签： html css height

【解决方案1】：

Auto 已经是默认值了。
块级元素不会拉伸以填充父级的高度。
所以，那个 div 不应该拉伸 - 是吗？（也许见height calculation for block level elements）
这意味着 is 遵守height:auto 属性。

也许您可以在页脚上使用 position: absolute; bottom: 10px; 并在内容上使用一些底部边距来做您想做的事情。
背景可能很棘手 - 也许您可以为所有正文设置“粉红色”背景，将标题和菜单设置为白色。

【讨论】：