jquery - 屏幕大小元素的 HTML 结构

Question

我正在尝试正确创建以下模型的 HTML 结构:

要求和条件:

1. 元素(粉色或黑色元素)的大小是设备屏幕的大小。
2. 每个元素代表一个页面。
3. 可以是台式机、平板电脑、智能手机等任何设备。
4. 一次只会显示一页!
5. 导航，不是我的问题的主题，我只是想提供尽可能多的信息，将通过在桌面设备上单击箭头并在其他设备上滑动来完成。
6. 不会有滚动条。
7. 任何页面的内容都可以超过屏幕的当前大小，如果是这样，它将在内容内部标记为带有 slider 或轮播功能。
8. 任何页面都可以包含与当前页面类似的其他结构。

我不确定了解所有要点是否对创建当前模型的基本结构都非常重要。

是否可以使用 position: relative 创建主要起始元素(粉红色)并使用 position: absolute 创建所有其他元素？还有要根据当前屏幕尺寸用 jQuery 计算的页面尺寸吗？或者不需要任何 jQuery 吗？ (width: 100% 和 height: 100% 只能通过 CSS 实现？)

我是这样想这个 HTML 结构的，但我不太确定这是最好的解决方案，所以我认为听取其他意见也是个好主意。

Answer 1

您的方法非常接近要求，所有页面 div 都应该在一个容器内，该容器需要是相对的，而子元素应该是绝对的，据我所知，一个简单的标记就足以实现这一点在 CSS 中使用视口(viewport)高度和宽度，如下所示

HTML

<div id="cont">
    <div id="pink"></div>
    <div id="blk1"></div>
    <div id="blk2"></div>
    <div id="blk3"></div>
    <div id="blk4"></div>
</div>

CSS

#cont{
  width: 100vw;
  height:100vh;
  position: relative;
}

#cont div{
  width: 100vw;
  height:100vh;
  background: #2c2c2c;
  margin:20px;
  position:absolute;
}

#pink{ background: #F00 !important; }
#blk1{ left: -100vw; }
#blk2{ top: -100vh; }
#blk3{ bottom: -100vh; }
#blk4{ right: -100vw; }

这是一个fiddle