스크롤 사업부는

Question

나는 다음과 같은 HTML 코드를 가지고

가 작동하지 않습니다.

div.content을 스크롤 가능하게하고 싶습니다. 테이블 셀을 사용하여 문제를 해결할 수 없기 때문에 div을 추가하고 overflow: auto을 추가하십시오.

는 전체 CSS는 다음과 같습니다

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
body { 
    display: table; 
    table-layout: fixed; 
} 
header, nav, .content { 
    display: table-cell; 
    vertical-align: top; 
} 
header { 
    width: 100px; 
    background: red; 
} 
nav { 
    width: 100px; 
    background: blue; 
} 
.content { 
    background: lightgreen; 
} 
.box { 
    background: lightblue; 
    height: 100%; 
    overflow: auto; 
} 

는 또한이 JSFiddle을 확인합니다.

이 코드는 IE9와 Opera12에서는 작동하지만 Firefox26에서는 작동하지 않는 것 같습니다.

누구나 문제가 무엇인지 알 수 있습니까?

Answer 1

내가 jQuery 코드의 작은 조각으로 문제를 해결 한 :

이

<script> 
$(window).on("resize", function() { 
    $(".box").height($(window).height()+"px"); 
}).resize(); 
</script> 

그것은 크기 조정 엉 페이지로드의 창 높이를 .box 제공합니다.