html - -webkit-fill-available 未按预期工作。 div的垂直滚动条的顶部和底部不正确

Question

我的页面在顶部包含一个固定的搜索框，在其下方包含一个包含文本的 div。我希望 div 的高度是窗口的其余部分(减去搜索框)。 div 有一个垂直滚动条，因为文本多于滚动条。 https://codesandbox.io/s/pjok544nrx

我试图通过将 div 的高度设置为 -web-fill-available 来实现这一点，但是 div 的高度太大并且延伸到窗口底部以下。所以你不能使用滚动条滚动到文本的底部。好像是用了整个窗口的高度，而不是减去搜索框的高度。

我也尝试过使用 flex，但也无法弄清楚该方法。

我怎样才能让它工作？

Answer 1

Flex 解决了它。 https://codesandbox.io/s/pjok544nrx

有关详细信息，请参阅 this

样式.css

body {
  margin:0; /* adding flex created a margin somehow */
  overflow-y: hidden;  /* suppresses the page's vertical scrollbar */
}

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}

.heading {
  font-size: 20px;
  background-color: white;
}

.fruits-list {
  overflow: scroll;  /* scroll enables inertial scrolling. auto doesn't */
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

.buffer {
  height: 600px;   /* Putting a buffer div after the list works better than 
                      setting padding-bottom on the list div which causes
                      the list div and its scroll bar to extend below the 
                      bottom of the window when the window is short. It should 
                      be set to more than the tallest the window can be. */
}

index.html

      <div className="container">
        <div className="heading">
          <Select
            ...
          />
        </div>
        <div className="fruits-list">
          {searchOptions.map(option => {
            return (
              <div key={option.value} id={option.value}>
                {option.label}
                ...
              </div>
            );
          })}
          <div className="buffer"></div>
        </div>
      </div>