即使溢出，Firefox仍然錯誤地擴展了div高度

適用於Chrome，但不適用於Firefox。當我不想要div時，div自動擴展。 http://jsfiddle.net/s8d5v/即使溢出，Firefox仍然錯誤地擴展了div高度

<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>

來源

2012-05-24 Min Ming Lo

變化高度：100％;在第三格固定高度

<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-24 06:06:43

我需要它採取父容器的全高度，這就是爲什麼我使用100％的高度。如果沒有，我將不得不分開寫javascript來做一堆計算。 –

您的父容器是否爲動態 – 2012-05-24 06:14:06

是的。第一行（高度：200px）實際上是動態的。它實際上是100％，但我將其更改爲200px，以表明Firefox擴展了單元格，但Chrome沒有。 –

你overflow:auto div有自動高度（因爲這是它的母細胞，它具有自動高度的100％），不是嗎？

來源

2012-05-24 20:32:30

即使溢出，Firefox仍然錯誤地擴展了div高度

回答

相關問題