Question

我有一个固定的页脚。我有一个相对的标题。在这些容器之间有一个内容设置为overflow-y：auto。这意味着滚动条应仅显示在此div容器中。我有一个围绕这个内容div的容器。此div的高度设置为像素，因为使用百分比时，它会自动变为100％并且滚动条不可见。在不改变屏幕高度的情况下，它在100％时看起来很完美。但是，如果用户要更改屏幕的高度 - 用户无法看到div中的所有内容，因为固定页脚现在覆盖了该内容。当用户缩小时，页脚和div之间有一个空白区域。我希望这样当用户缩小时没有空白区域，并且当用户改变屏幕的高度时，用户可以查看所有内容。

HTML

<div class="top-container">
 </div>
<div class="container">
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<footer>

</footer>

CSS

.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0; 
width: 100%
}
.container {
padding: 10px 0;
margin: 0 .6%;
}
ul {
padding-top: 2px;
height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
 background: #fff;
padding: 20px 50px;
overflow: hidden;
position: fixed;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
}

JSFIddle这个JSfiddle没有准确地显示我的问题。滚动条应仅显示在内容中，而不显示在标题中。这就是现在的情况。

由于

Answer 1

.top-container {
  position: relative;
  z-index: 6;
  background: #fff;
  padding: 40px 40px 0;
  bottom: 0; 
  width: 100%;
  max-height: 60px;
  background: green;
}
.container {
  padding: 10px 0;
  margin: 0 .6%;
  overflow-y: scroll;
  height: calc(100vh - 100px);
  background: blue;
}
ul {
  padding-top: 2px;
  height: 437px;
  overflow-y: auto;
  overflox-x: hidden;
}
footer{
  background: #fff;
  padding: 20px 50px;
  overflow: hidden;
  position: fixed;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: 100%;
}
body{
  max-height: 90vh;
  }
footer{
  background: red;
  max-height: 40px;
}

<div class="top-container">

</div>
<div class="container">
  <ul>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
</div>
<footer>

</footer>

以下是更新后的jsFiddle

Answer 2

.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0; 
width: 100%
}
.container {
padding: 10px 0;
margin: 0 .6%;
}
ul {
padding-top: 2px;
//height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
 background: #fff;
padding: 20px 50px;
overflow: hidden;
z-index: 5;
width: 100%;
}

这是你想要的吗？

响应滚动div高度

2 个答案: