关于javascript：让DIV覆盖整个页面，但没有使用CSS位置


Make a DIV cover entire page, but WITHOUT using CSS position

本问题已经有最佳答案，请猛点这里访问。

我想用红色的EDOCX1[0]来划分整个页面，但我不想使用css EDOCX1[1]。下面是我的CSS位置示例：

1
 

CSS位置在大多数情况下都有效，但我无法创建多个div(因为top: 0和left: 0而重叠或取消)。当你向下滚动时，我想让你看到更多的div。

如果有一个纯粹的CSS解决方案，这真的会有帮助，但JavaScript和HTML也对我开放。只是没有jquery。

相关讨论

使用视区高度和视区宽度怎么样？

我在这个JSfiddle中创建了一个示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body, html {
    margin: 0;
    padding: 0;
}

div {
    width: 100vw;
    height: 100vh;
}

.one {
    background-color: blue;
}

.two {
    background-color: green;
}

.three {
    background-color: yellow;
}
1
 

。

相关讨论

如果你想让DIV占据整个空间，使用大众和VH。

因为仅使用DIV的高度：100%和宽度：100%不会这样做

不使用视区单位

检查此代码段

1
2
3
4
5
6
7
8
9
10
11
div{
 width: 100%;
  height:100%;
  background:red;
   
}

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

号

但是让HTML和正文具有高度和宽度是一个坏主意所以要跳过它，请使用视图端口单元

使用Viewport Unist检查此项

1
2
3
4
5
div {
  width: 100vw;
  height: 100vh;
  background: red;
}
1
 

号

希望有帮助

相关讨论

通过使用单个绝对定位的容器(内部分隔符继承高度和宽度属性值)，可以在不使用可视高度和宽度单位的情况下支持IE7和8等较旧的浏览器。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
body {
   margin: 0px;  /* optional */
}
#box {
   position:absolute;
   height: 100%;
   min-width: 100%;
}
.page {
   padding: 5px; /* optional */
   height: inherit;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
    <body>
   

   
         25em
   
    2
    3

   
    </body>

。

更新：容器的width属性已被IE7中引入的min-width属性替换，以修复丑陋的水平滚动问题。不必要的情况下，移除了为内部div元件提供width。

相关讨论

只需更改每个值的top:值。第一个是0，第二个是100%，第三个是200%等等。下面是一个工作示例：

1
 

。

相关讨论