居中的 div 没有正确溢出答案

【问题标题】：centered div does not overflow correctly居中的 div 没有正确溢出
【发布时间】：2018-05-14 21:47:08
【问题描述】：

我在另一个 div(outer) 中有一个居中的 div(inner)。如果内部 div 大于外部 div，我希望滚动条滚动到元素的顶部或底部。可悲的是，我无法完全滚动到顶部。我认为这是由 transform:translate 技巧引起的。

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

我使用 inline-style 作为内部 div 的宽度和高度，因为我用 js 动态改变了它。

这个问题是在here 之前提出的。但是没有人明白他想做什么。

【问题讨论】：

是的，由于溢出行为，您无法滚动顶部
不，如果你删除它，你仍然有同样的问题：jsfiddle.net/9yzu7gyd/1
检查 stackoverflow.com/questions/49278725/… ;) 我不是指 orverlow 属性，而是 CSS 中的溢出是如何工作的，与 translate 无关
感谢您的快速响应，我看错了。
@woodyplz 我试图更好地理解你的问题。所以如果内部 div 太高，你希望内部 div 动态调整大小，外部 div 获得滚动条和滚动（而且太宽？）不适合。 1）当你说你的内部 div 是centered 是垂直/水平/两者？ 2）你为什么用absolute然后用transform撤消定位？

标签： javascript html css

【解决方案1】：

也许您应该尝试使用 auto 而不是 hidden 并根据此更改您的代码：

.outer {
  overflow: scroll;
  width: 100%;
  height: 100%;
  position: relative;
}

.inner {
  background-color: red;
  overflow: auto;
}


/* normalize */

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

我基本上删除了您的位置属性，以使内部 div 从外部 div 继承它。另外，我删除了您的转换属性，因为您不一定需要它。

我希望这会有所帮助！

【讨论】：

I basically deleted your position property to make the inner div inherit it from the outer div. Plus I deleted your transform property since you don´t necessarily need it. --> 您基本上删除了所有内容，因此我们没有问题没有居中，只有基本布局。 ...并且在这种情况下溢出：自动无效

【解决方案2】：

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

请删除转换 css，因为它正在发送内容 -50% 开箱即用，您可以使用

left: 0;
right: 0;
margin: auto;

居中位置：绝对内容你不需要使用 left:50%

【讨论】：