我在用
div {width: 100%; height: 100%}
因为我需要在页面的开头有一个“全屏幕”的div。我读过我需要设置
html, body {width: 100%; height: 100%}
太。它看起来很棒,但在此之后我有一些内容。我的问题开始了。 HTML仍然只有高度设置的高度:100%。以下内容仅从html标记溢出。有没有办法只用CSS和HTML来避免这个问题?我可以用javascript做到这一点,但我想以另一种方式做到这一点。
谢谢你的回答。
您偶然发现了(至少)Chrome和Firefox中存在的错误。我不知道有多少浏览器受到影响,但肯定会有这两种浏览器。
当一个元素的高度为100%时,它将正确地从具有已定义高度的父级继承,但它不会从具有最小高度的父级继承。在使用min-height时,几乎就像浏览器根本无法识别父级的高度。
你可以做的唯一办法就是使用你提到的javascript或相对/绝对定位。例如:
html, body { min-height: 100%; }
body { position: relative; }
section { position: absolute; }
你可能需要修改截面元素的顶部,左边,右边和底部,但你明白了。
尝试
min-height: 100vh
width: 100%
对于div而言,不要给html或body标签赋予任何宽度和高度。
要做到这一点,你必须应用*
。这意味着将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>