Question

我有一个Web应用程序，我没有自己开发，但我的任务是清理一些不再工作的东西。

有一个问题我无法弄清楚为什么会发生这种情况。

Web应用程序分为两个面板。但是，当用户完全向下滚动时，可滚动的第二个面板不会到达页面底部。

同样通过缩小（ctrl - ）我们在底部得到一个空白区域，尽管面板可以继续滚动。

我想要拥有此面板，滚动就好像是整页一样。

我把快速静态副本放在小提琴上。

https://jsfiddle.net/brianz820/qmzw8923/

我相信的部分是。

<div id="house-estimates-scroll-panel">
    <div id="house-estimates-listing"></div>
</div>

div#house-estimates-scroll-panel {
    position: relative;
    /*display: inline-block;*/
    margin: 0;
    padding: 0;
    height: 1200px;
    /*height: 100%;*/
    /*width: 100%;*/
    overflow-y: visible ;
    overflow-x:hidden;
    background-image: linear-gradient(to right, #f3f3f3 , #bbb);
    background-size: 15px 20px;
    background-position: right;
    background-repeat: repeat-y;

}

div#house-estimates-listing {
    margin: 0;
    padding: 0;
    height: 90000px;
    /*width: 320px;*/
    /*width: 960px;*/
}

我已将完整的HTML和CSS部分添加到小提琴中。

Answer 1

您可以尝试通过添加这些规则将包装器放入display:flex容器中（由于特殊性问题，有些看起来很奇怪）

body {
  height: 100%;
}

div#wrapper {
  flex-direction: column;
  height: 100%;
  display:flex;
  overflow: hidden;
}

div#house-estimates-panel {
  display:flex;
  overflow: hidden;
}

div#house-estimates-scroll-panel{
  height: auto;
  flex: 1 auto;
}

div#house-estimates-listing {
  height: auto;
}

演示：https://jsfiddle.net/gw35wc4c/1/show/
来源（我的CSS位于底部）：https://jsfiddle.net/gw35wc4c/1/

HTML / CSS - 可滚动部分不适合页面。

1 个答案: