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

Question

我遇到了溢出问题：自动问题。我得到了一个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>

Answer 1

您必须为内容元素指定完美的高度才能使滚动起作用。

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

＆＃13;

＆＃13;

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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

好吧，因为整个组件都在id =“container”的div中，你给了容器div overflow：隐藏在css中，所以它基本上覆盖了给内容的css属性

在你的css #container中 将其更改为

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