Question

适用于Chrome，但不适用于Firefox。当我不想要时，div自动扩展了。 http://jsfiddle.net/s8d5v/

<div style="display: table; table-layout: fixed; width: 100%; height: 200px;">
    <div style="display: table-row">
      <div style="display: block; overflow: auto; height: 100%; width: 100%;">
          <p>The height expands in Firefox, but not Chrome. It works correctly in Chrome when I want it to overflow.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
  </div>
  <div style="display: table-row; height: 40px; width: 100%; background: yellow;">
      bottom bar
  </div>

</div>

Answer 1

更改身高：100％;到第三个div的固定高度

<div style="display: table; table-layout: fixed; width: 100%; height: 200px;">
    <div style="display: table-row">
      <div style="overflow: auto; height: 150px; width: 100%;">
          <p>The height expands in Firefox, but not Chrome. It works correctly in Chrome when I want it to overflow.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
  </div>
  <div style="display: table-row; height: 40px; width: 100%; background: yellow;">
      bottom bar
  </div>

</div>

Answer 2

你的overflow:auto div有自动高度（因为它是其父级单元的100％，有自动高度），不是吗？

即使打开溢出，Firefox也会错误地扩展div高度

2 个答案: