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 calculation for block level elements）
这意味着遵守height:auto属性。

也许您可以使用页脚上的position: absolute; bottom: 10px;和内容的一些底部边距来执行您想要的操作。
背景可能很棘手 - 也许你可以为所有身体提供“粉红色”背景，并为标题和菜单添加白色。

内容div没有填满剩余的空间

1 个答案: