如何设置html元素,使其用尽剩余的可见垂直空间

时间:2019-03-05 06:17:57

标签: html css css3 flexbox alignment

我正在努力使代码中所描述的溢出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 :(得分:2)

您甚至可以嵌套您的flexbox-将您的#firstmain设为 flexbox并赋予{{1 }}:

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%;
}