높이 100 %의 HTML 레이아웃

특정 문제에 대한 도움이 필요합니다. 기본적으로 div가 셀 안에있는 div를 필요로합니다. 또한 가장 큰 바깥 쪽 div는 100 % 높이와 너비 (전체 페이지를 커버하는)와 자손의 높이를 accodringly 계산할 필요가 있습니다. 내용이 높이 그들의보다 큰 (그들은 스크롤바를 표시해야합니다)높이 100 %의 HTML 레이아웃

내가 테스트 페이지와 바이올린을 준비했습니다 그 div의 :

http://jsfiddle.net/S2YSh/6/

지금까지 만 Google 크롬 I로 표시 계획, IE는 높이 100 %에서 패딩과 여백을 계산하지 않으며 Firefox는 내용과 함께 늘어납니다 (스크롤바 없음)

누구나 나를 (아마도 같은 HTML 구조로) 도와 주시면 좋겠네요.

출처

2011-11-08 Ace Trajkov

당신은 이런 식으로 작업을 수행 할 수 있습니다

.right{ 
    float:right; 
    width:200px; 
    height:100%; 
    background:red; 
} 
.left{ 
    overflow:hidden; 
    background:green; 
    height:100%; 
} 
.right, .left{ 
padding:20px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 

html, body{ 
    height:100%; 
}

확인이 http://jsfiddle.net/S2YSh/9/

출처

2011-11-08 09:29:10 sandeep

이 작동하지 않습니다 가장 바깥 쪽 스크롤바가 나타나지 않는다. iside divs에만있다. –

내 업데이트 된 바이올린을 확인한다 – sandeep

이 솔루션은 훌륭하지만 IE7은 이것을 지원하지 않을 것이다. –

이 시도 : 당신은 패딩이나 마진의 모든 유형을 추가하면 내가 때문에

가

<div style="height:100%;width:100%;position:absolute;top:0;left:0;"> 
    <table>...</table> 
</div>

출처

2011-11-08 09:43:10 jerjer

높이 100 %의 HTML 레이아웃

답변

관련 문제