HTML + CSS布局，底部框显示所有内容，可变高度顶部框带滚动

时间：2016-03-17 07:27:18

标签： html css

  • 我想要两个盒子，一个在另一个上面。
  • 底部框应该尽可能多地显示其整个内容所需的高度（我不知道这些内容需要多少高度）。
  • 顶部框应填充容器的剩余高度，必要时为其内容生成滚动。

Working example

这个小提琴是我上面所描述的一个实例：https://jsfiddle.net/gabrielmaldi/q258g40y/

HTML：

<div class="container">
  <div class="my-component">
    <div class="my-component_top-content">
      Variable content that should fill the container and scroll.
    </div>
    <div class="my-component_bottom-content">
      Variable content that should extend in height as much as needed.
    </div>
  </div>
</div>

CSS：

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 320px;
}

.my-component {
  display: table;
  height: 100%;

  background-color: lightblue;
}

.my-component_top-content {
  display: table-row;
  height: 100%;
  float: left;
  overflow-y: auto;

  background-color: green;
}

.my-component_bottom-content {
  display: table-row;
  height: 0;

  background-color: orange;
}

这适用于Chrome（直到第49版）和Safari。问题是它在Chrome 50及以上版本中断（您可以浏览Chrome Canary中的小提琴并亲自查看）。

我提交了这个问题：https://bugs.chromium.org/p/chromium/issues/detail?id=594376并且正在进行一些讨论。但根据CSS规范，这可能不是Chrome的回归（Chrome 49的行为与Firefox不匹配，而Chrome 50行为也是如此）。

我还没有找到一种方法来实现我想要的功能在Chrome Canary（或Firefox，虽然我不是特别需要支持，但可能是在Firefox中运行的布局）也适用于较新的Chrome版本。）

那么，我怎样才能实现我在三个初始项目中所描述的内容，哪些适用于Safari，Chrome 49和Chrome 50（Canary）？

编辑：我需要支持较旧的Android Stock浏览器，如果没有display: flex;可以实现这一目标，那么它是最好的，因为那里没有非常好的支持

谢谢！

4 个答案:

答案 0 :(得分：2)

根据旧版浏览器支持的评论/要求进行更新，此处为display: table版本

更新2，现在可用于Webkit（Canary inlcuded），Firefox，Edge，IE11

＆＃13;
＆＃13; 
html, body {
  margin: 0;
  height: 100%;
}
.container {
  height: 100%;
}
.my-component {
  display: table;
  height: 100%;
  width: 100%;
}
.my-component-top {
  display: table-row;
  background-color: yellow;
  height: 100%;
}
.my-component-top-cell {
  display: table-cell;
  height: 100%;
  position: relative;
}
  /* IE11 fix - need block */
  _:-ms-fullscreen, :root .my-component-top-cell { display: block; }

.my-component-top-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.my-component-bottom {
  display: table-row;
  background-color: green;
}
＆＃13; 
<div class="container">
  <div class="my-component">
    <div class="my-component-top">
      <div class="my-component-top-cell">
        <div class="my-component-top-inner">
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
        </div>
      </div>
    </div>
    <div class="my-component-bottom">
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

对于现代浏览器，请使用flex这样的情况，其中顶部框有flex: 1来填充剩余空间，而底部框有flex: 0，以尽可能少地使用min-height: 20px;可用空间。

此外，我在顶部框中添加了html, body { margin: 0; height: 100%; } .container { height: 100%; } .my-component { height: 100%; display: flex; flex-direction: column; } .my-component_top-content { background-color: yellow; overflow: auto; flex: 1; min-height: 20px; } .my-component_bottom-content { background-color: green; flex: 0; }，以防底部框中的内容变大（防止它完全消失）。

＆＃13;
＆＃13; 
<div class="container">
  <div class="my-component">
    <div class="my-component_top-content">
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
    </div>
    <div class="my-component_bottom-content">
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
    </div>
  </div>
</div>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用flex解决问题：

.my-component {
  height: 100px;
  display: flex;
  flex-direction: column;
}

.my-component_top-content {
  background-color: yellow;
  overflow-y: scroll;
}

.my-component_bottom-content {
  background-color: green;
}

fiddle

答案 2 :(得分：1)

dgrogan提出了这个解决方案here。

适用于Chrome 49，Chrome 50和Safari 9，它不依赖于display: flex。它在Firefox，Edge和IE11中不起作用。

https://jsfiddle.net/dgrogan/1w3hmvph/

HTML：

<div class="container">
  <div class="my-component">
    <div class="td">
      <div class="my-component_top-content">
        Variable content that should fill the container and scroll.
      </div>
    </div>
    <div class="my-component_bottom-content">
      Variable content that should extend in height as much as needed.
    </div>
  </div>
</div>

CSS：

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 320px;
}

.my-component {
  display: table;
  height: 100%;

  background-color: lightblue;
}

.td {
  display: table-cell;
  height: 100%;
  background-color: lightgreen;
}

.my-component_top-content {
  height: 100%;
  overflow-y: auto;

  background-color: green;
}

.my-component_bottom-content {
  display: table-row;
  height: 0;

  background-color: orange;
}

答案 3 :(得分：0)

  1. 将高度从％更改为px。高度％不起作用。
  2. overflow-y：滚动;最佳内容。
  3. 使用jquery来解决它。 css不是用于计算其他DOM的
相关问题
最新问题