2

My page includes a fixed Search box at the top and a div under it containing text. I want the div's height to be the remainder of the window (minus the Search box). The div has a vertical scrollbar because there is more text than will fit in it. https://codesandbox.io/s/pjok544nrx

I'm trying to achieve this by setting the div's height to -web-fill-available, but the div's height is too big and it extends below the bottom of the window. So you can't scroll to the bottom of the text using the scrollbar. It seems to be using the height of the whole window, not subtracting the height of the Search box.

I tried using flex too, but couldn't figure out that approach either.

How can I get this to work?

Dan Cancro
  • 1,401
  • 5
  • 24
  • 53
  • Consider adding `padding-bottom:3%;` on `.heading`. – Mukyuu Mar 21 '19 at 01:18
  • @Mukyuu Thanks. That does improve the demo, but not my real page for some reason. I'm also unsure how a fixed value of 3% will work on devices of various sizes. – Dan Cancro Mar 21 '19 at 02:22
  • You might want to inspect and test the variance of styling there. Possibly it was overwritten by another styling. For percentage base value: [It is often used to define a size as relative to an element's parent object.](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) – Mukyuu Mar 21 '19 at 02:24
  • I had overlooked a "position:fixed" on the list in my page. Removing that I can choose percents for different media breakpoints, but I don't think percent is going to work. The list's div does not resize when I resize the browser window. I'm not a css expert but I'm having trouble accepting that there's no way to simply tell a div to take up the available vertical space of the window whatever it may be. – Dan Cancro Mar 21 '19 at 13:46
  • An alternative would be to remove the items from the fruits-list div and then use the page's scrollbar, but when scrolled to the top the thumb would either be hidden under the Search box (in the case of my real page which has a long list and therefore a small thumb) or I would need to horizontally shorten the Search box which would look odd. – Dan Cancro Mar 21 '19 at 13:48

1 Answers1

1

Flex solved it. https://codesandbox.io/s/pjok544nrx

For more info, see this

styles.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>
Dan Cancro
  • 1,401
  • 5
  • 24
  • 53
  • Nope. That works on my computer but not my phone. The Search box doesn't show up at all on my phone. – Dan Cancro Mar 21 '19 at 18:01
  • It's because Element.scrollIntoView works differently (brokenly?) in Safari on iOS. Calling the function scrolls the whole page pushing the Search box out of sight. However, if you then manually swipe downwards all the way, the Search box comes back into view again. If you then manually swipe upwards, the Search box stays put. – Dan Cancro Mar 21 '19 at 18:20
  • This semi-solved that. https://stackoverflow.com/a/50411076/1941430 Either way, sometimes the Search box is lost. Sometimes it isn't. – Dan Cancro Mar 22 '19 at 02:35