오버플로가 켜져 있어도 Firefox가 div 높이를 잘못 확장합니다.

Firefox에서는 작동하지만 Chrome에서는 작동하지 않습니다. 내가 원하지 않을 때 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에 고정 된 높이에

<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 % 인 이유입니다. 그렇지 않다면 별도로 계산을 수행하기 위해 자바 스크립트를 작성해야합니다. –

부모 컨테이너가 동적입니까 –

예. 첫 번째 줄 (높이 : 200px)은 실제로 동적입니다. 실제로는 100 %이지만, 파이어 폭스가 셀을 확장한다는 것을 입증하기 위해 그것을 200px로 변경하지만 크롬은 그렇지 않습니다. –

당신 (이 자동 높이가 부모 셀의 100 %이기 때문에) overflow:auto 사업부는 자동차의 높이가, 아니?

출처

2012-05-24 20:32:30

오버플로가 켜져 있어도 Firefox가 div 높이를 잘못 확장합니다.

답변

관련 문제