Question

我有一个div，其位置为：相对，并将其放置在页面的底部中心中。 已设置高度和宽度。我的问题是，该div的高度足够大，以致仅一半显示在页面上。我最初的期望是，由于尺寸“ 溢出了身体的默认尺寸（高度）”，因此将显示一个垂直滚动条。但是我错了。我认为，当我将其（div）位置设为相对位置时，我将其与保留在身体上的空间分开，因此身体只能看到其原始空间被占用。而且，当我将其移动到页面底部的中间部分时，主体只能看到其原始空间（在移动div之前），这就是为什么没有垂直滚动条显示的原因仍有内容要显示。

现在，我该怎么做，或者甚至有什么方法可以使主体跟踪该div的放置位置。因此，如果该div放置在页面边缘附近的某个位置，并且其高度或宽度足够大以扩展容器的大小，则它应显示一个滚动条以指示还有更多内容要显示。

这是当前的样子： Sample

“ 最近活动” div相对放置并位于页面的底部中心。我放了一个边框，这样我们可以看到底部边框没有被看到，并且div看起来好像在不应该被剪切时一样被剪掉了。

Answer 1

好。因此，我知道这很难解释...但是我猜测您是将div定位为活动-类似于position: relative-然后也是top: 672px

相对定位通过更改位置（相对于其在流程中的自然位置）来起作用。它还具有为绝对定位的子代创建定位边界的附加效果。但这不会增加页面高度或通过滚动等方式进行跟踪。它仍然是开始的地方……您只是在视觉上移动了框的显示方式。您用它做什么？您可能可以完成所需的工作-无需相对定位。

为了更接近回答您的问题，这是我如何编写显示的布局的示例。（简体）

如果您查看此jsFiddle（https://jsfiddle.net/sheriffderek/ny5hfa67）-也许可以对其进行修改以显示您的问题。

这里有一种资源，可让您充分利用自己的问题：https://stackoverflow.com/help/how-to-ask

.overview {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.overview .area {
  border: 1px solid blue;
  flex-basis: 50%;
  padding: 1rem;
}

.activity {
  position: relative; /* so what? */
  border: 1px solid green;
}

.activity .activity-list {
  border: 1px solid orange;
}

.activity-list .link {
  display: block;
  padding: 1rem;
}

<section class='overview'>

  <aside class='area attendance'>
    attendance
  </aside>
  
  <aside class='area payments'>
    payments
  </aside>

</section>


<section class='activity'>
  
   <aside class="activity-list">
     <ul class="item-list">
       <li class="item">
         <a class="link">item</a>
       </li>
       <li class="item">
         <a class="link">item</a>
       </li>
     </ul>
   </aside>
  
</section>

具有位置相对关系的div问题

1 个答案: