Почему определенные объявления DOCTYPE приводят к тому, что стоп-столы на 100% и деления перестают работать?

Мне кажется, что некоторые объявления DOCTYPE в IE (6-8) могут заставить браузер игнорировать height="100%" для таблиц и divs (style="height:100%")

например

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

Отобразит DIV с высотой текста, он не растянется. Удаление объявления DOCTYPE заставляет DIV растягиваться по вертикали по желанию.

Итак, мои вопросы:

  • Почему это происходит?
  • Как вы сохраняете DOCTYPE и все еще разрешаете таблицы растягиваться?
  • Делает ли это с вами?
  • Знаете ли вы об этом?, хорошо ли это известно?

Ответы

Ответ 1

  • Поскольку у древних браузеров было странное, непоследовательное поведение и браузеры рассматривали Doctypes, такие как тест интеллекта, чтобы узнать, пишет ли автор код стандарты или то, что они узнали из W3Schools десять лет назад. Если у вас height: 100%, а высота родительского элемента auto, то 100% означает auto.

    /li >

  • Как правило, вы этого не делаете. Он кричит " таблица макета". Тем не менее, установите высоты или минимальные высоты на элементы html и body. Существуют и другие методы, но на данный момент у меня нет удобной ссылки, так как, как ни странно, я никогда не был в такой ситуации, когда мне нужна была техника.

  • Это то, что должны делать браузеры, поэтому...

  • Хорошо, я отвечаю на этот вопрос...

Ответ 2

Реальное решение этой "проблемы" будет использовать следующий CSS:

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

Однако помните, что граница добавляет высоту.

Ответ 3

Когда вы удаляете doctype, браузер переходит в режим причуд, который по-разному влияет на более старый код, который не проверяется корректно.

Вы должны установить высоту в элементе контейнера, чтобы div со 100% высотой не наследовал высоту: auto;

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