Question

我正在尝试构建一个布局，其中我在后台有两个div，跨越100％的页面，然后是一个较小的全高度包装div，用于位于页面中心的内容。我遇到的问题是我可以让包装器正确地放在顶部div的顶部;我不能让它在底部div上正确行事。这是一个例子：

html,
body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.index-banner {
  background: #265f7a;
  height: 60%;
  width: 100%;
}

.wrapper {
  background: #444;
  height: 200%;
  margin: 0 auto;
  position: relative;
  top: -60%;
  left: 0;
  right: 0;
  width: 50%;
}

.footer-bg {
  background: #888;
  height: 250px;
  position: relative;
  top: -85%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

<body>
  <div class="index-banner"></div>
  <div class="wrapper"></div>
  <div class="footer-bg"></div>
</body>

现在上面代码的问题是使用负面定位，然后我在页面底部留下了一个巨大的空白。不过我也尝试过：

在包装器div上使用绝对定位。完美地保持页面正确的大小，然后底部div浮动到视口的底部
使用一种虚拟方法，通过在身体上使用背景图像使底部div看起来像一个全宽div;遗憾的是，由于两个背景div之间没有内容，因此仅将其粘贴到视口底部而不是页面底部。

现在我已经考虑过保持包装器在两个背景div之间自然发生，所以它们根本不重叠然后把div放在那些背景div里面与包装器对齐但是这变得有点像我的噩梦我想要避免因为那时我必须努力尝试对齐与它们重叠的内容，因为每个“节div”必须分成两部分（想象一下试图使一个段看起来像一个因为它在两个div之间传播）。

所以我的问题是 - 我是否以错误的方式解决这个问题并忽略了一些我可以采用不同的方式来实现这一目标的工作？

使包装器div重叠两个更宽的div

0 个答案: