在这种情况下，溢出-y 自动不起作用答案

【问题标题】：Overflow-y auto not working in this case在这种情况下，溢出-y 自动不起作用
【发布时间】：2018-09-23 04:25:57
【问题描述】：

overflow-y: auto 有问题。我得到了一个 div 以我想要的方式工作：使用页眉和页脚将内容覆盖在其最大高度，并在缩小视口时分别在顶部和底部保持可见，我唯一无法工作的是滚动条在内容中间。我可以让 div 滚动，但不能使用此页眉/页脚行为。请帮忙。

这是代码。如果不够干净，请见谅：

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>

<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>

【问题讨论】：

你希望它表现如何？？
我希望页脚在内容很短和很长时紧跟在内容之后页面底部。

标签： html css

【解决方案1】：

您必须为内容元素提供完美的高度才能使滚动生效。

height: calc(100vh - 24px - 40px - 40px);

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: calc(100vh - 24px - 40px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>

<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      aaaabla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>

【讨论】：

它的工作原理是它可以滚动，但现在容器不能适应较短的内容，我想保持这种灵活性。
改用max-height。
做到了。谢谢！
抱歉耽搁了，我接受了答案。再次感谢。

【解决方案2】：

因为整个组件都在 id = "container" 的 div 中，并且你给了容器 div overflow: hidden 在 css 中，所以它基本上覆盖了给 content 的 css 属性

在你的 CSS #container 把它改成

  overflow-y: scroll ;
  overflow-x: hidden ;

【讨论】：

但我只希望在内容 div 上而不是在整个容器上都有一个滚动条，以便页眉和页脚始终完全可见。