HTML + CSS-全屏html

Question

I am using 我在用

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

because I need to have a div which should be "full screen-ed" on the beginning of my page. 因为我需要在页面开始处有一个“全屏显示”的div。 I've read that I need to set 我读过我需要设置

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

too. 太。 It looks great but after this I have some content. 看起来不错，但是之后我有了一些内容。 Here my problem begins. 我的问题从这里开始。 HTML still have only the height which was set by height: 100% . HTML仍然只有由height设置的高度：100％ 。 And content below only overflows from html tag. 并且下面的内容仅从html标签溢出。 Is there any way to avoid this problem only with CSS and HTML ? 有什么方法可以仅使用CSS和HTML来避免此问题？ I can do it with javascript but I would like to do it another way. 我可以用javascript来做，但我想换一种方式。

Thanks for your answers. 感谢您的回答。

PS: http://honzakopecky.8u.cz/masaze/ PS： http : //honzakopecky.8u.cz/masaze/

Answer 1

You have stumbled across a bug existing in (at least) Chrome and Firefox. 您偶然发现（至少）Chrome和Firefox中存在的错误。 I don't know how many browsers are affected, but it's certainly in those two. 我不知道有多少浏览器受到影响，但是肯定是在这两个中。

When an element has height: 100% then it will correctly inherit from a parent which has a defined height but it will not inherit from a parent with min-height. 当元素的高度为100％时，它将正确地从具有已定义高度的父级继承，但不会从具有min-height的父级继承。 It's almost as if the browser doesn't recognize the parent's height at all when using min-height. 使用min-height时，浏览器几乎完全无法识别父级的高度。

The only thing you can do to get around this bug, is use javascript like you mentioned, or relative/absolute positioning. 要解决此错误，您唯一可以做的就是使用您提到的javascript或相对/绝对定位。 For example: 例如：

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

You may need to tinker with your top, left, right, and bottom on the section element but you get the idea. 您可能需要修改section元素的顶部，左侧，右侧和底部，但您了解了。

Answer 2

Try 尝试

min-height: 100vh
width: 100%

for the div and don`t give any width and height to the html or body tag. 对于div，不要给html或body标签任何宽度和高度。

Answer 3

To do this you must to apply * . 为此，您必须申请* 。 It means set margin and paddings of ALL elements to 0. Because the browser applying different values. 这意味着将所有元素的边距和填充设置为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>

HTML + CSS-全屏html

问题描述

3 个解决方案

解决方案1
1 2013-12-27 04:54:28

解决方案2
0 2018-02-13 11:37:25

解决方案3
0 2019-03-01 06:57:34

HTML + CSS-全屏html

问题描述

3 个解决方案

解决方案1 1 2013-12-27 04:54:28

解决方案2 0 2018-02-13 11:37:25

解决方案3 0 2019-03-01 06:57:34

解决方案1
1 2013-12-27 04:54:28

解决方案2
0 2018-02-13 11:37:25

解决方案3
0 2019-03-01 06:57:34