HTML+CSS - html 全屏答案

【问题标题】：HTML+CSS - html fullscreenHTML+CSS - html 全屏
【发布时间】：2014-01-14 09:26:37
【问题描述】：

我正在使用

div {width: 100%; height: 100%}

因为我需要在页面的开头有一个应该是“全屏显示”的 div。我读过我需要设置

html, body {width: 100%; height: 100%}

也是。它看起来很棒，但在此之后我有一些内容。我的问题从这里开始。 HTML 仍然只有 height: 100% 设置的高度。以下内容仅从 html 标签溢出。有没有办法只用 CSS 和 HTML 来避免这个问题？我可以用 javascript 做到这一点，但我想用另一种方式做到这一点。

感谢您的回答。

附注：http://honzakopecky.8u.cz/masaze/

【问题讨论】：

您需要在 100% 高度后隐藏或在 100% 后自动增长？
小提琴，拜托...我很老套
body {min-height: 100%}?
是的，@popnoodles 或隐藏body {overflow:hidden}
我需要它来自动增长。我已经尝试过 min-height 但它并没有使那个 div “全屏”。

标签： html css height overflow

【解决方案1】：

为此，您必须申请*。这意味着将所有元素的边距和填充设置为0。因为浏览器应用了不同的值。

<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <style type="text/css">
        * {
            margin:0px;
            padding:0px;
            background-color:red;
        }
        div {
            background-color:blue;
            height:100%;
            width:100%;
       }
    </style>
</head>
<body>
    <div> text </div>
</body>
</html>

【讨论】：

尽量使用正确的拼写、标点和语法。

【解决方案2】：

试试

min-height: 100vh
width: 100%

对于 div，不要给 html 或 body 标签指定任何宽度和高度。

【讨论】：

【解决方案3】：

您偶然发现了（至少）Chrome 和 Firefox 中存在的错误。我不知道有多少浏览器受到影响，但肯定是这两个。

当一个元素的高度为 100% 时，它将正确地从具有定义高度的父级继承，但不会从具有最小高度的父级继承。就好像浏览器在使用 min-height 时根本无法识别父母的身高一样。

您唯一可以解决此错误的方法是使用您提到的 javascript 或相对/绝对定位。例如：

html, body { min-height: 100%; }
body { position: relative; }
section { position: absolute; }

您可能需要修改 section 元素的顶部、左侧、右侧和底部，但您明白了。

【讨论】：