Почему определенные объявления DOCTYPE приводят к тому, что таблицы 100% высоты и divs перестают работать?
-
22-09-2019 - |
Вопрос
Мне кажется , что некоторые 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
растянуть вертикально по желанию.
Итак, мои вопросы таковы:
- Почему это происходит?
- Как вы сохраняете
DOCTYPE
и все еще разрешить таблицам растягиваться? - Случилось ли это с вами?
- Знали ли вы об этом?, хорошо ли это известно?
Решение
Поскольку древние браузеры имели странное, непоследовательное поведение и обрабатывали типы документов следующим образом тест на интеллект чтобы увидеть, пишет ли автор код в соответствии со стандартами или тому, чему они научились в W3Schools десять лет назад.Если у вас есть
height: 100%
а высота родительского элемента равнаauto
тогда100%
означаетauto
.Как правило, вы этого не делаете.Это кричит "таблица компоновки".Тем не менее, установите высоты или минимальные высоты для элементов html и body.Есть и другие техники, но на данный момент у меня нет удобной ссылки, поскольку, как ни странно, я никогда не был в положении, когда мне нужна была эта техника.
Это то, что должны делать браузеры, так что …
Что ж, я отвечаю на этот вопрос …
Другие советы
Реальным решением этой "проблемы" было бы использование следующего CSS:
html, body {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
#mydiv {
height: 100%;
}
Однако помните, что граница добавляет высоту.
Когда вы удаляете doctype, браузер переходит в режим quirks, который работает по-другому, чтобы помочь более старому коду, который не прошел проверку, правильно отображаться.
Вы должны установить высоту для элемента контейнера, чтобы div со 100% высотой не наследовал высоту:авто;
Вы могли бы попробовать переключиться с переходного на строгий, но я сомневаюсь, что это исправит вашу проблему.