css - body 标签的高度百分比问题 - 未通过搜索解决

Question

我已经阅读了大量关于填充视口(viewport)的 css 高度主题的帖子，但未能找到有效的答案。因此，我不情愿地开始了另一个关于这个的话题，希望能找到我可能一直盯着看却没有看到的拼图缺失的部分。

我的 DOCTYPE 是 xhtml transitional，我目前正在 IE6、FF6 和 Safari 5 上测试同样的问题。

我有一个容器 div，它还在表格中显示一个图像驱动的边框，我希望它能填满浏览器窗口，既不大也不小，但可以适应每个浏览器(最小高度为设置以确保包含所有内容以说明较早的决议)。

我已将 html 和 body 样式设置如下:-

html {
    height:auto !important;
    height: 100%;
    min-height: 100%;
    border: solid;
    border-color: black;
    overflow: hidden;
}

body {
    height: 100%;
    height:auto !important;
    min-height: 100%;
    border: solid;
    border-color: black;
}

如您所见，我为每个元素都添加了边框，这样我在查看页面时就可以真正看到每个元素的大小。 html 元素很好地填充了窗口，但 body 元素没有。它只是在窗口顶部显示一个短框。

任何人都可以就可能导致问题的原因提出建议吗？

Answer 1

这就是你需要的 css:

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

实例:http://jsfiddle.net/tw16/gyAKJ/