Question

我正在处理一个项目，我正在使用display：table和table-row with overflow auto。但它在Firefox（和IE）中的表现并不像预期的那样。

在Chrome中，它的行为应该如此。

StackOverflow上有this个问题，这似乎与我的问题非常相似，但没有给出答案或样本。

我试图在JSbin和Fiddle中重现这一点，但这并没有奏效。

为了说明Chrome和Firefox中的行为，我制作了两个屏幕抓图：

我还设置了一个小型HTML示例，可以找到here。您可以通过在Chrome和Firefox中打开网站来重现并扩展textarea，直到底部容器溢出页面。

代码

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.tableWrapper {
  display: table;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
}
.textArea {
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}
.content {
  display: table-row;
  height: 100%;
  margin: 10px;
}
.content div {
  display: block;
  overflow: auto;
  height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
  height: -moz-calc(100% - 20px);
  background: #ADE6DF;
  margin: 10px;
}
.content p {
  background: white;
  margin: 10px;
  padding: 5px;
}

＆＃13;

<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
  </div>
</div>

＆＃13;

非常令人沮丧，我希望有人知道发生了什么。

Answer 1

如果你对弹性好，你可以使用它：（ https://jsfiddle.net/x59n7Lek/ - https://jsfiddle.net/x59n7Lek/1/）

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tableWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
  max-width: 100%;
  /*for the demo snippet */
  max-height: 100%;
  /* maybe you still want to see the content if textarea is too big ? */
  overflow: auto;
}

.textArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}

textarea {
  height: 100%;
  /* optionnal */
}

.content {
  margin: 10px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.content div {
  flex: 1;
  overflow: auto;
  display: block;
  background: #ADE6DF;
  margin: 10px;
}

.content p, footer,header {
  background: white;
  margin: 10px;
  padding: 5px;
}

＆＃13;

<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
    <footer>footer</footer>
  </div>
</div>

＆＃13;

Answer 2

这似乎可以解决问题。希望它有用。

＆＃13;

	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	.tableWrapper {
		display: table;
		height: 100%;
		background: darkgrey;
		table-layout: fixed;
		width: 800px;
		margin: 0 auto;
	}

	.content {
		display: table-row;
		height: 100%;
	}

	.content div {
  display: block;
  overflow: auto;
		/*
			height: calc(100% - 20px);
			height: -webkit-calc(100% - 20px);
			height: -moz-calc(100% - 20px);
		*/
	height: 100%;
	background: #ADE6DF;
	margin: 10px;
	max-height: 80vh;
	min-height: 80vh;
	overflow: auto;
	}
	.content p {
		background: white;
		margin: 10px;
		padding: 5px;
	}
	.textArea {

	}
	.content p, footer,header {
		background: white;
		margin: 10px;
		padding: 5px;
	}

＆＃13;

	<div class="tableWrapper">
		<div class="textArea">
		<textarea></textarea>
		</div>
		<div class="content">
			<div>
				<header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>

					<p>
					Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
					</p>
					<p>
					Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
					</p>

		</div>
    <footer>footer</footer>

	</div>

</div>

＆＃13;

显示：table-row＆amp;溢出：在Chrome，Firefox（和IE）中自动显示不同的行为

2 个答案: