вопрос div: высота не распространяется на содержимое - PullRequest
Новая
       5

вопрос div: высота не распространяется на содержимое

5 голосов
/ 14 октября 2010

Я пытаюсь создать веб-страницу с использованием CSS (меньше таблицы), но моя основная область контента не расширяется с содержимым, пожалуйста, проверьте мои HTML и CSS-коды и дайте мне решения, Спасибо 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">
footer
</div>

</div>
</body>
</html>

Код CSS 

body{
    margin:0px;
    padding:0px;
    height:auto;
}

#wrapper{
    margin:0px auto;
    width:1000px;
}

#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}

#main{
height:auto;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;

}

#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}

#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;

margin-right:2px;

}
#right{
float:right;
padding:4px;

border:#CCCCCC solid 1px;
width:320px;


}

Еще раз спасибо

Ответы [ 2 ]

9 голосов
/ 14 октября 2010

Просто примените overflow:auto; к #main, чтобы обернуть плавающие дочерние элементы.Взгляните на Плавающее изображение влево изменяет высоту контейнера div

(Вы можете удалить правило height)

3 голосов
/ 16 октября 2010

В вашем документе есть плавающие элементы, которые, как следует из названия, означают, что они плавают над вашим «основным» элементом. Следовательно, оно не расширяется.

Легко исправить, вам просто нужно вставить «очистить».

Ваш HTML должен выглядеть следующим образом, обратите внимание на дополнительный div. 

<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>

И просто добавьте следующее к вашему CSS. 

.clearme{clear:both}

Подробнее о свойствах clear и их использовании можно узнать здесь: http://www.tutorialhero.com/tutorial-64-css_clear_property.php

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

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

...