CSS-поле рухнуло - но почему? - PullRequest
Новая
       14

CSS-поле рухнуло - но почему?

0 голосов
/ 28 января 2009

У меня есть этот простой xhtml: 

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>

Показывает два прямоугольника, но нижний (синий) не показывает отступ 2000px. Это только так высоко, как окно. Зачем? Или, что более важно, как мне сделать это, чтобы показать? Я могу добавить какой-то фиктивный текст, например «ааа», между этими двумя </div> </div>, но я не думаю, что это правильный способ сделать это.

Большое спасибо за помощь!

Ответы [ 5 ]

1 голос
/ 28 января 2009

Если вы хотите 2000px синего цвета под 400px div, сделайте это изменение:

Измените высоту содержащего элемента div на высоту его содержимого + пробел 2000px. 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">

<head> </head>

<body style="height: 100%;">

  <div style="height: 2400px; overflow: auto; background-color: #00f;">

    <div style="height: 400px; background-color: #f00;">
    </div>

  </div>

</body>

</html>
0 голосов
/ 28 января 2009

lotusvskoi: Спасибо, но потом тело прокручивает, а не внешний div.

endash: Да! Это оно! Большое спасибо, также за объяснение. Обертывание внутреннего div внутри другого div с отступом: 1px отлично работает!

Финальная версия, для архивации:

</p> <pre><code><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> <head> <style> </style> </head> <body style="height: 100%;"> <div style="height: 100%; overflow: auto; background-color: #00f;"> <div style="padding-bottom: 1px;"> <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"> </div> </div> </div> </body> </html>

0 голосов
/ 28 января 2009

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

0 голосов
/ 28 января 2009

Избавьтесь от объявления height в синем фоне. 

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="background-color: #00f;overflow:auto">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
      </div>
</body>
</html>
0 голосов
/ 28 января 2009

Удалите height: 100% из <body>: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body>
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>
...