Question

所以我的左侧和顶部位于屏幕尺寸的绝对位置div。

更新：请参阅此处的演示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>

Answer 1

根据您的图像，您将居中的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

保持绝对定位div相对于容器而不是屏幕

1 个答案: