как установить HTML-элемент так, чтобы он занимал оставшееся видимое вертикальное пространство - PullRequest
Новая
       9

как установить HTML-элемент так, чтобы он занимал оставшееся видимое вертикальное пространство

0 голосов
/ 05 марта 2019

Я изо всех сил пытаюсь заставить часть overflow-y функционировать, как описано в коде.У меня есть элемент, который будет занимать столько же вертикального пространства, сколько его содержимое, а при переполнении родительский свиток.Код в полном объеме можно увидеть здесь: https://jsfiddle.net/bmts8L5x/3/.Я должен был включить сюда только часть кода, чтобы удовлетворить соотношение кода и не-кода для линтера здесь. 

header {
  background: yellow;
}

#first {
  overflow: hidden;
}

container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#side {
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: scroll;
}

#side>div {
  height: 200px;
}

html,
body {
  margin: 0;
  padding: 0;
}

main>div:first-child {
  background: white;
  height: 50px;
}

#big {
  background: pink;
  border: solid;
  overflow: scroll;
  display: flex;
  flex: 1;
}

#big>div {
  width: 1000px;
  height: 100px;
  /* I'd like to see #big take up the remaining space regardless of whether height here is 100px or 10000px */
}
<container>
  <div id="side">
    <div>
      side nav does not scroll
    </div>
    <div>
      item
    </div>
    <div>
      item
    </div>
    <div>
      item
    </div>
    <div>
      item
    </div>
    <div>
      item
    </div>

  </div>
  <div id="first">
    <header>
      foo
    </header>
    <main>
      <div>
        this should remain visible after scrolling without needing position fixed
      </div>
      <header>
        some other stuff
      </header>
      <div id="big">
        <div>
          this should take up the rest of the remaining viewable space and have any overflow be scrolled through.
          <br /> X scrolls as expected but Y's overflow isn't contained to rest of viewable space.
        </div>
      </div>
    </main>
  </div>
</container>

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете вкладывать свои флексбоксы еще больше - сделайте свой #first и main столбец flexbox и задайте ему height: 100%: 

#first, main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

См. Демо ниже: 

header {
  background: yellow;
}

#first {
  overflow: hidden;
}

container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#side {
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: scroll;
}

#side>div {
  height: 200px;
}

html,
body {
  margin: 0;
  padding: 0;
}

main>div:first-child {
  background: white;
  height: 50px;
}

#big {
  background: pink;
  border: solid;
  overflow: scroll;
  display: flex;
  flex: 1;
}

#big>div {
  width: 1000px;
  height: 100px;
}


/* ADDED */
#first, main {
  display: flex;
  flex-direction: column;
  height: 100%;
}
<container>
  <div id="side">
    <div>side nav does not scroll</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
  </div>
  <div id="first">
    <header>foo</header>
    <main>
      <div>
        this should remain visible after scrolling without needing position fixed
      </div>
      <header>
        some other stuff
      </header>
      <div id="big">
        <div>
          this should take up the rest of the remaining viewable space and have any overflow be scrolled through.
          <br /> X scrolls as expected but Y's overflow isn't contained to rest of viewable space.
        </div>
      </div>
    </main>
  </div>
</container>
...