Question

我想设置一个带有标题，内容和页脚的简单网站结构。页眉和页脚是设置的大小，内容扩展以填充额外的空白区域。该网站还应强制执行最小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>

Answer 1

html和body不会占用整个视口，除非您指定它以便...

html, body {
  height: 100%;
}

这将解决您的问题。但我必须承认，我不知道为什么删除doctype会达到同样的效果。

Chrome -webkit-box-flex不会在HTML5中展开

1 个答案: