保持绝对定位的div相对于容器而非屏幕居中

Question

保持绝对定位的div相对于容器而非屏幕居中

3

我有一个绝对定位的

，它是从左侧和顶部居中于屏幕大小的。更新：请查看此处演示http://codepen.io/anon/pen/pJmdJo。

.middle {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

例如，用户使用小尺寸的横屏手机浏览页面。(屏幕高度缩小)

div会如预期地重叠，这不是我们想要的结果。 我希望得到的结果是:

div的高度应该停止变小，不应小于我们的header的高度。粘性页脚也应该停止超过限制。

注意: 正文的最小高度还不存在。我认为应该添加这个。头部并不是真正的标题，它只是我的页面顶部部分，包括标志和网站名称。

与其他标签相关的代码：

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.header {
  margin-top: 20px;
}
.middle {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<body>
  <div class="wrapper">
    <div class="logo"></div>
    <div class="header">Welcome</div>
    <div class="middle">Description</div>
    <div class="footer"></div>
  </div>
</body>

- xperator

好奇一下，如果“描述”div有很多内容会发生什么情况？这种情况下，它会重叠在标题上方，并可能位于页脚下方（取决于任何z-index值）。 - Marc Audet

@MarcAudet 说得好，我也想了解那个问题。但在我的情况下没有。只是几行介绍网站的内容。 - xperator

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

根据您的图片，您将居中的div绝对定位于整个包含块。因此，它始终会相对于该容器居中。

如果您想将居中的div保持在浅灰色区域内，那么您需要为该部分分配一个"position: relative"，然后使居中的div成为浅灰色元素的子元素。然后，绝对定位的偏移量将与浅灰色框相关。

更新（基于评论和修改后的问题）

看起来您遇到的问题主要是由固定高度（像素）和相对高度（百分比）组合而成。如果您只在div容器中使用百分比高度，则页面将平滑缩放。

请尝试调整CSS：

.logo {
    margin: 10px auto 0;
    background: rgba(0, 0, 0, 0) url("... omitted for demo...") no-repeat scroll 0 0;
    height: 20%; /* changed from 80px; */
    width: 80px;
}

.middle {
  position:relative;
  height: 60%; /* changed from 100% */
  background-color: lightgray;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%; /* changed from 50px */

DEMO