表格单元格内100％的高度div在Firefox上不起作用 [英] 100% height div inside table-cell not working on Firefox

问题描述

我正在尝试使用display table-cell属性创建两列100％高的布局。在Chrome上运行正常，但是在Firefox和IE上都没有成功。

I'm trying to create a two column 100% height layout using the display table-cell property. It is working fine on Chrome, but I'm not having success on Firefox nor IE.

这里是小提琴： http://jsfiddle.net/ehfa0kk8/5/

看看它适用于Chrome。知道如何进行这项工作吗？

Take a look at how it works on Chrome. Any idea of how to make this work?

<div id="table">
    <div id="row">
        <div id="cell_1">
            <div id="overflown_div">
                long content goes here...
            </div>
        </div>
        <div id="cell_2">
            Blah blah blah
        </div>
    </div>
</div>

和CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#table {
    width: 100%;
    display: table;
    height: 100%;
}

#row {
    display: table-row;
}

#cell_1, #cell_2 {  
    display: table-cell;
    height: 100%;
}

#cell_1 {
    width: 390px;
    background: aliceblue;
}

#cell_2 {
    background: yellow;
}

#overflown_div {
    height: 100%;
    overflow: scroll;
    padding: 10px;
}

更新：首先，左列应有足够的内容，这样溢出。在Chrome上，它显示一个滚动条，因此您可以只滚动该列（单元格）的内容。在Firefox上不会发生。

UPDATE: First, there should be enough content on the left column so it will overflow. On Chrome it shows a scroll bar so you can scroll just the content of that column (cell). On Firefox it doesn't happen.

示例：

推荐答案

诀窍是：

• 将行的高度设置为 100％


• 将单元格的高度设置为 0

• Set row's height to 100%
• Set cell's height to 0

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#table {
  width: 100%;
  display: table;
  height: 100%;
}
#row {
  display: table-row;
  height: 100%;
}
#cell_1,
#cell_2 {
  display: table-cell;
  height: 0;
}
#cell_1 {
  width: 390px;
  background: aliceblue;
}
#cell_2 {
  background: yellow;
}
#overflown_div {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  box-sizing: border-box;
}
#overflown_div p {
  height: 80px;
}

<div id="table">
  <div id="row">
    <div id="cell_1">
      <div id="overflown_div">
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
        <p>Blah blah blah</p>
      </div>
    </div>
    <div id="cell_2">
      Blah blah blah
    </div>
  </div>
</div>

这篇关于表格单元格内100％的高度div在Firefox上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！