Div содержимого не заполняет оставшееся пространство - PullRequest
Новая
       7

Div содержимого не заполняет оставшееся пространство

0 голосов
/ 19 марта 2010

В основном #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>

Есть идеи у кого-нибудь?

1 Ответ

0 голосов
/ 19 марта 2010

Авто уже является значением по умолчанию.
Элементы уровня блока не растягиваются, чтобы заполнить высоту родителя.
Итак, этот div не должен растягиваться - не так ли? (Возможно см. расчет высоты для элементов уровня блока )
Это означает, что является подчиняющимся атрибуту height:auto.

Может быть, вы можете делать то, что вы хотите, используя position: absolute; bottom: 10px; в нижнем колонтитуле и некоторое нижнее поле для содержимого. Фон может быть сложным - может быть, вы можете дать «розовый» фон всему телу, а белый - заголовку и меню.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...