0

适用于 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>

​</p>

4

2 回答 2

0

您的overflow:autodiv 具有自动高度（因为它是其父单元格的 100%，具有自动高度），不是吗？

于 2012-05-24T20:32:30.460 回答
0

变化高度：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>
于 2012-05-24T06:06:43.917 回答