Переполнение CSS родительского DIV - PullRequest
Новая
       6

Переполнение CSS родительского DIV

3 голосов
/ 19 ноября 2009

У меня проблема с сайтом, который я собираю. У меня есть простой макет div. Что выглядит следующим образом: 

<body>
    <div id="Container">
        <div id="Logo"></div>

        <div id="Banner">
            <div id="Nav"></div>
        </div>
        <div id="Content">
        </div>

        <div id="footer">Footer</div>
    </div>
</body>​

И мой CSS выглядит следующим образом: 

@charset "utf-8";
/* CSS Document */


html, body {
    height:100%;
    padding:0;
    margin:0;
    background-image:url(../layout.img/background_gradient.gif);
    background-repeat:repeat-x;
}

#Container {
    height:100%;
    width:950px;
    margin:auto;

    background-color:#FFFFFF;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
}

#Logo {
    width:160px;
    height:160px;
    float:right;
}

#Banner {
    width:100%;
    height:160px;
}

#Nav {
    width:550px;
    height:33px;
    position:relative;
    top:100px;
    left:50px;
}

#Content {
    clear:both;
}

И, наконец, результат можно увидеть здесь:

http://jsfiddle.net/mczMS/

Как вы можете видеть, div-контейнер не растягивается с содержимым при прокрутке страницы. Я знаю, что это, наверное, что-то глупо простое, но сегодня мне не хватает умственных способностей Ха-ха.

Ответы [ 2 ]

8 голосов
/ 19 ноября 2009

Попробуйте добавить: 

#container { min-height: 100%; }

после высота 100%. Вы также можете попробовать: 

#container { overflow: auto; }
4 голосов
/ 19 ноября 2009

Если вы удалите высоту: 100% из контейнера, он растянется, чтобы соответствовать его содержимому.

...