CSS DIV не изменяет размер своей высоты

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

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

<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 также расширяется, но он сохраняет фиксированную высоту (это просто увеличивает высоту изображения логотипа), и мой текст в меню и content_body div не работает.

Мой 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; 
}

Что я делаю неправильно?

источник

2009-10-05 Alaor

Не злоупотребляйте теги - если вы чувствуете, что это "принадлежит на doctype.com", то сказать, что здесь, в комментариях. Не делайте это как тег. – Sampson

Извините, я не знал doctype.com! Моя вина. =/ – Alaor

Но, кстати, почему doctype ... отличается? Это причина, что есть намного меньше ppl ... – IProblemFactory

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

Для того, чтобы получить DIV, содержащие элементы плавали по размеру с его содержанием вы можете дать это дисплей: встроенный блок и, возможно, ширина: 100%, так что он занимает всю площадь ...

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

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

источник

2009-10-05 19:28:16

Oh! На самом деле спасибо, за ответ и объяснение, теперь многое имеет смысл! Спасибо, мужик! И жаль людей, если бы это был вопрос о доктрине, я буду там в следующий раз! – Alaor

IE 6 и 7 и Firefox 2 не любят встроенный блок все время. Посмотрите этот пост в блоге: http://blog.flobro.com/inline-block-for-everybody/ –

Попробуйте

#content 
{ 
    ... 
    overflow: auto; 
}

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

источник

2009-10-05 19:27:37 blu

yep, но обязательно дайте ему ширину. Overflow: auto + width заставит его очистить все div внутри. (пожалуйста, проголосуйте, чтобы удалить ответ, который я оставил. Я разместил его как ответ, а не комментарий) –

Try:

#footer{ 
    clear:both; 
}

demo

источник

2014-08-14 15:19:05

CSS DIV не изменяет размер своей высоты

ответ

Смежные вопросы