0

Works in Chrome, but not in Firefox. The div auto expanded when I did not want it to. 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

Change height:100%; to a fixed height in third 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 に答える
0

あなたのoverflow:autodivには自動高さがあります（自動高さを持つ親セルの100％であるため）いいえ？

于 2012-05-24T20:32:30.460 に答える