CSS DIV не меняет свою высоту - PullRequest
Новая
       9

CSS DIV не меняет свою высоту

1 голос
/ 05 октября 2009

Я не могу заставить это работать так, как должно, я не очень хорош в CSS, мне нужна ваша помощь!

У меня есть такая страница: 

<html>
<head><title>title</title></head>
<body>
<div id="page">
    <div id="container">
        <div id="head"><img src="..." alt="..." /></div>
        <div id="content">
            <div id="menu"><ul><li>...</li></ul></div>
            <div id="content_body">stuff here</div>
        </div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>

OK. У моего контейнера div есть цвет фона, я хочу, чтобы, пока мой текст внутри div content_body расширялся, фон контейнера div тоже расширялся, но он сохранял фиксированную высоту (он просто увеличивает высоту изображения логотипа), и мой текст в меню и содержимом div_body находится вне фона.

Мой CSS: 

body
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    background-color: #333333;
    background-image: url(Images/bg.png);
    background-repeat: repeat-x;
    color: #000000;
    margin: 0px;
}
input 
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    font-weight: bold;
}
h2
{
    text-decoration: underline;
    font-style: italic;
}
#page
{
    width: 100%;
}
#container
{
    overflow: visible;
    width: 780px;
    border: solid 6px #FFFFFF;
    background-color: #DCDCCD;
    margin: 0 auto;
    margin-top: 15px;
}
#content
{
    clear: both;
}
#menu
{
    width: 240px;
    display: block;
    float: left;
}
#content_body
{
    width: 500px;
    display: block;
    float: right;
}

Что я делаю не так?

Ответы [ 3 ]

6 голосов
/ 05 октября 2009

Все в вашем #content div является плавающим, и хорошо, плавающие элементы на самом деле не занимают места. По сути, поскольку они плавают, их выводят за пределы обычного потока контента и нарушают правила, чтобы их можно было толкнуть влево или вправо.

Чтобы получить элемент div, содержащий плавающие элементы, по размеру с его содержимым, которое вы можете указать, это display: inline-block и, возможно, width: 100%, чтобы он занимал всю область ... 

#content{ display: inline-block, width: 100%; }

Отображение встроенного блока заставляет все, что находится за его пределами, думать, что это элемент встроенного уровня, но все внутри него обрабатывается так, как будто это элемент уровня блока, и в итоге он дает высоту всему внутри него. это может быть плавающим без необходимости задавать ему высоту.

6 голосов
/ 05 октября 2009

Попробуйте 

#content
{
    ...
    overflow: auto;
}

Edit: Также убедитесь, что добавили ширину, как DA указывает в комментарии ниже.

0 голосов
/ 14 августа 2014

Попробуйте: 

#footer{
  clear:both;
}

демо

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

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

...