文章/答案/技术大牛

发布

问HTML+CSS - html全屏
EN

Stack Overflow用户

提问于 2013-12-26 18:48:21

回答 3查看 394关注 0票数 0

我在用

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

因为我需要一个div，应该是“全屏编辑”在我的页面开头。我读到了我需要设置

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

也是。它看上去很棒，但在这之后我有一些内容。我的问题开始了。HTML仍然只有由高度设置的高度: 100%。下面的内容只会从html标记溢出。只有CSS和HTML才能避免这个问题吗？我可以用javascript来完成它，但是我想用另一种方式来做。

谢谢你的回答。

P.S.：http://honzakopecky.8u.cz/masaze/

overflow

html

css

height

回答 3

Stack Overflow用户

发布于 2013-12-27 04:54:28

你偶然发现了一个在Chrome和Firefox中存在的bug。我不知道有多少浏览器会受到影响，但这两个浏览器中肯定有影响。

当元素具有高度: 100%时，它将正确地从具有定义高度的父元素继承，但不会从具有最小高度的父元素继承。几乎就像浏览器在使用最小高度时根本不识别父服务器的高度一样。

要避免这个错误，唯一能做的就是使用您提到的javascript，或者是相对/绝对定位。例如：

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

您可能需要修补节元素的顶部、左边、右侧和底部，但您有了这个想法。

票数 1

Stack Overflow用户

发布于 2018-02-13 11:37:25

试一试

min-height: 100vh
width: 100%

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

票数 0

Stack Overflow用户

发布于 2019-03-01 06:57:34

要做到这一点，您必须应用*。它意味着将所有元素的边距和填充设置为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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20789645

复制

相似问题

问HTML+CSS - html全屏
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML+CSS - html全屏EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML+CSS - html全屏
EN