Chrome -webkit-box-flex не расширяется в HTML5 - PullRequest
1 голос
/ 17 января 2012

Я хочу настроить простую структуру сайта с верхним, нижним и нижним колонтитулами. Верхний и нижний колонтитулы имеют заданные размеры, а содержимое расширяется, чтобы заполнить лишние пробелы. На сайте также должен быть установлен минимальный размер 800x600. Это прекрасно работает без указания DOCTYPE, но как только я добавляю, контентный раздел не раскрывается.

Вот мой код. Удалите DOCTYPE, чтобы увидеть, как он работает должным образом. Этот код работает только для Chrome.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="min-width: 800px; min-height: 600px;margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1.0; background-color: gray;">
    <div style="height: 50px; background-color: red;">Header</div>

    <div style="background-color: yellow; -webkit-box-flex: 1.0;">Content</div>

    <div style="height: 50px; background-color: blue;">Footer</div>
</body>
</html>

1 Ответ

3 голосов
/ 03 февраля 2012

html и body не будут занимать весь видовой экран, если вы не укажете его, поэтому вам нужно ...

html, body {
  height: 100%;
}

Это исправит вашу проблему. Но я должен признаться, я понятия не имею, почему удаление doctype достигает того же эффекта.

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