div 높이로 오버플로가 크롬과 파이어 폭스에서 100 % 다르게 보임

다음 예에서 Chrome이 2 행 (두 번째 행)의 스크롤을 표시하고 Firefox가 테이블 외부에 표시하는 이유를 설명 할 수 있습니다. 즉, Firefox가 두 번째 행의 높이를 제한하지 않는 이유는 무엇입니까? Firefox뿐만 아니라 Chrome에서도 어떻게 작동합니까? 감사합니다.div 높이로 오버플로가 크롬과 파이어 폭스에서 100 % 다르게 보임

<table style="width: 100%; height: 100%; border: 1px solid black;"> 
 
    <tr> 
 
     <td style="border: 1px solid black;"> 
 
      <h1 id="titol">HELLO</h1> 
 
     </td> 
 
    </tr> 
 
    <tr style="height: 100%;"> 
 
     <td style="border: 1px solid black;"> 
 
      <div style="height: 100%; overflow-y: auto;"> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>

출처

2017-11-24 Pere Sánchez

넣었지만 시도하지 않았습니다. 나는 그것이 당신이 신장의 높이에 관해 말하고있는 것이라고 생각한다 . 나는 마침내 그것을 얻었다. 그러나 나는 자바 스크립트를 사용해야했다. –

마지막으로, 나는 자바 스크립트없이 그것을 얻었다!

<html> 
    <head> 
     <title> 
      Hello 
     </title> 
     <style> 
      body { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
       overflow: hidden; 
      } 

      #container { 
       height: 100%; 
       display: flex; 
       flex-direction: column; 
      } 

      #header { 
       flex-grow: 0; 
      } 

      #content { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
       overflow-y: auto; 
       flex-grow: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header"> 
       <h1>HELLO</h1> 
      </div> 
      <div id="content"> 
       FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
       Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello 
      </div> 
     </div> 
    </body> 
</html>

출처

2017-11-27 07:17:12

<html> 
<head> 
    <title>Hello</title> 
</head> 
<body onresize="setContentHeight()" style="margin: 0; padding: 0; overflow-y: hidden;"> 
    <div id="header"> 
     <h1>HELLO</h1> 
    </div> 
    <div id="content" style="margin: 0; padding: 0; overflow-y: auto;"> 
     FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> 
     Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello 
    </div> 
</body> 
<script> 
function setContentHeight() { 
    document.getElementById("content").style.height = document.body.clientHeight - document.getElementById("content").offsetTop; 
} 
setContentHeight(); 
</script> 
</html>

출처

2017-11-25 08:57:30

div 높이로 오버플로가 크롬과 파이어 폭스에서 100 % 다르게 보임

답변

관련 문제