Question

我有一个绝对定位的容器，里面是一个滚动的div，问题是，当没有足够的内容滚动时，用户仍然可以滚动。

原因似乎是p标签上的边距，但这只有在父母绝对定位时才会产生影响（必须是这样）。

当没有太多内容时，是否有人有解决方案来阻止溢出？

HTML：

<div id="container">
  <div id="container-scroller">
    <header>
      <h1>Title</h1>
    </header>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

CSS：

#container{
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
}

#container-scroller{
  max-width: 600px;
  margin: auto;
  position: relative;
  min-height: 100%;

}

修改

有些人建议删除100％的最小高度 - 我需要保留它。

Answer 1

~~您必须删除min-height: 100%;。~~

编辑：

有点＆＃34; hacky＆＃34;但你可以添加一个负的上边距：

＆＃13;

#container {
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
}
#container-scroller {
  max-width: 600px;
  margin: auto;
  position: relative;
  min-height: 100%;
  margin-top: -21px;
}

＆＃13;

<div id="container">
  <div id="container-scroller">
    <header>
      <h1>Title</h1>
    </header>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

＆＃13;

偏移量来自滚动条。

Answer 2

删除标题标记上的margin-bottom: 2em;。如果你需要间距，请尝试使用填充。

Answer 3

您无需使用绝对和相对定位来居中您的内容。如果你从两个div中删除你的位置CSS，并使他们的高度100％，你的问题将得到解决。然后，您可以通过将text-align: center添加到容器中心来对齐您的滚动条。

JS Fiddle

#container{
  /*position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;*/
  height: 100%;
  text-align: center;
}

#container-scroller{
  max-width: 600px;
  margin: auto;
  /*position: relative;*/
  min-height: 100%;
}

Answer 4

您可以将隐藏的溢出添加到滚动的容器中，并自动溢出到绝对定位的父容器：

＆＃13;

var text = "usuário"; 
Assert.AreNotEqual(text.Length, text.Normalize(NormalizationForm.FormD).Length);

＆＃13;

#container {
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    overflow: auto;
}
#container-scroller {
    max-width: 600px;
    margin: auto;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

＆＃13;

可滚动的div，仍然滚动内容不多

4 个答案: