HTML + CSS - 全屏html

问题描述 投票:0回答:3

我在用

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/

html css height overflow
3个回答
1
投票

您偶然发现了(至少)Chrome和Firefox中存在的错误。我不知道有多少浏览器受到影响,但肯定会有这两种浏览器。

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

你可以做的唯一办法就是使用你提到的javascript或相对/绝对定位。例如:

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

你可能需要修改截面元素的顶部,左边,右边和底部,但你明白了。


0
投票

尝试

min-height: 100vh
width: 100%

对于div而言,不要给html或body标签赋予任何宽度和高度。


0
投票

要做到这一点,你必须应用*。这意味着将ALL元素的边距和填充设置为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>
© www.soinside.com 2019 - 2024. All rights reserved.