Question

我正在努力解决这个问题，我在一个专栏中有两个div。

第一个（#first）会很小，但我不能提前知道它的高度。应始终显示其内容，而不显示滚动条。

第二个（#second）将很长（事实上，这将是一个表格）。所以当它变得太大时，我希望它可以滚动。

这两个div（#container）的容器占用了可用高度的100％，并且不能用更多。

我不确定我是否需要柔性盒。如果不将高度设置为#first，我不确定是否可以采取这种行为。

HTML：

<div id="container">
  <div id="first">
    Some random stuff (but should be small)<br>
    Like few lines<br>
    No more
  </div>
  <div id="second">
    <div id="content">
      This can be very very<br>
      very very<br>
      very long
    </div>
  </div>
</div>

CSS

#container {
  height: 100%;
  width: 90%;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: solid black 1px;
}

#first {
  width: 90%;
  margin: auto;
  background-color: cyan;
}

#second {
  width: 90%;
  margin: auto;
  background-color: pink;
}

#content {
  width: 100%;
  height: 1000px;
}

这jsFiddle会有所帮助。

Answer 1

如果您添加flex: 1; overflow: auto #second，它将填充其父级的可用空间，当其内容太大时，它将滚动。

要使此演示有效，因此height: 100%上的container设置将从哪里获得100％，我还将height: 100%添加到html }和body。

Stack snippet

html, body {
  height: 100%;                  /*  added  */
  margin: 0;                     /*  added  */
}
#container {
  height: 100%;
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  border: solid black 1px;
  box-sizing: border-box;
}

#first {
  width: 90%;
  margin: auto;
  background-color: cyan;
}

#second {
  width: 90%;
  margin: auto;
  background-color: pink;

  flex: 1;                       /*  added  */
  overflow: auto;                /*  added  */
}

#content {
  width: 100%;
  height: 1000px;
}

<div id="container">
  <div id="first">
    Some random stuff (but should be small)<br>
    Like few lines<br>
    No more
  </div>
  <div id="second">
    <div id="content">
      This can be very very<br>
      very very<br>
      very long
    </div>
  </div>
</div>

如果大于父级，则使随机高度的垂直div可滚动

1 个答案: