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

StackOverflow https://stackoverflow.com/questions/1997842

Вопрос

Мне кажется , что некоторые DOCTYPE объявления в IE (6-8) могут привести к игнорированию браузером height="100%" в таблицах и подразделениях (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 растянуть вертикально по желанию.

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

  1. Почему это происходит?
  2. Как вы сохраняете DOCTYPE и все еще разрешить таблицам растягиваться?
  3. Случилось ли это с вами?
  4. Знали ли вы об этом?, хорошо ли это известно?
Это было полезно?

Решение

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

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

  3. Это то, что должны делать браузеры, так что …

  4. Что ж, я отвечаю на этот вопрос …

Другие советы

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

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

#mydiv {
    height: 100%;
}

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top