居中的div大于其容器溢出滚动 [英] Centered div larger than its container overflow scroll

问题描述

在容器内具有绝对放置且完全居中(翻译技巧")的div: jsfiddle .

Having an absolutely placed and perfectly centered ("translate trick") div within a container: jsfiddle.

<div id='container'>
  <div id='content'>
    <p>
      centered...
    </p>
  </div>
</div>

#container{
  position: relative;
  width: 400px;
  height: 400px;
  background-color: gray;
}

#content{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  transform: translate(-50%, -50%);
}

现在，当此内部div变得大于其容器且容器发生溢出时:自动(滚动).通过滚动到容器的内部和顶部以及其最大值和最大值，使内部div的最大顶部和左侧部分变得不可见:

Now when this inner div becomes larger than it's container and the container has overflow: auto (scroll). It becomes impossible to get the utmost top and left part of the inner div to become visible within the container by scrolling it to the left and top and its maximum: jsfiddle.

#container{
  ...
  overflow: auto;
}

#content{
  ...
  width: 500px;
  height: 500px;
  ...
}

当内部div缩放到溢出容器div的比例时，就会发生相同"的事情:

The "same" thing happens when the inner div is scaled to a proportion that it overflows the container div: jsfiddle.

#container{
  ...
  overflow: auto;
}

#content{
  ...
  transform: ... scale(5);
}

关于如何使用容器div的滚动条使内部div保持居中并仍然能够到达其所有区域的任何想法?还是在大小溢出容器时(可能使用javascript)删除居中"?纯CSS解决方案是更可取的.

Any ideas on how to have the inner div stay centered and still be able to reach all its area by using the scrollbars of the container div? Or should the "centeredness" be dropped when the size overflows the container (possibly using javascript)? A pure css solution is much preferred.

推荐答案

您可以使用一些绝对定位进行居中(最大高度和最大宽度)，然后将滚动条放在内部容器中，如下所示:

You could use some absolute positioning to do the centering, a max-height and max-width, and put the scroll on the inside container, like so:

https://jsfiddle.net/hnzo2sa4/

.container {
  position: relative;
  background-color: gray;
  margin: 10px;
}

.bigger {
  width: 300px;
  height: 300px;
}

.same {
  width: 200px;
  height: 200px;
}

.smaller {
  width: 100px;
  height: 100px;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
  background: rgba(987, 654, 321, .6);
  overflow: scroll;
}

<div class="container bigger">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

<div class="container same">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

<div class="container smaller">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

这篇关于居中的div大于其容器溢出滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！