100 % 너비와 크기 조정 부모 사업부의 높이 - CSS

는100 % 너비와 크기 조정 부모 사업부의 높이 - CSS

<div class="Window"> 
    <div class='Title'></div> 
    <div class="Viewer"></div> 
</div>

먼저 .Window

.Window { 
    width:80%; 
    background-color:red; 
    position:absolute; 
    z-index:1; 
    top:10%; 
    left:10%; 
    margin-left: 0%; 
    bottom:10%; 
}

는 IS 여는 창입니다 .... 나는이 div의가 있다고 가정하자 두 번째 div는 .Viewer

.Viewer { 
    width:100%; 
    height:100%; 
    background-color:green; 
}

.viewer div를 부모 div의 100 % 높이와 너비로 이동하려면 어떻게해야합니까? 명심하십시오. 제목은 .Window의 제목이므로 공간을 차지합니다. 따라서 .Viewer 내가 당신 .Title 10 % 및 90 % 높이를 가질 수있는 고정 된 높이 (.Title 및 .Viewer이있는 경우는 JS없이 불가능하다 생각 .Title

출처

2012-03-08 Joe

혼란스러워 ... "뷰어 div가 100 % 높이와 너비의 부모 div로 이동"하지만 ".Viewer가 .Title 아래에서 시작해야 함"이라고 말하면 ... 그게 맞습니까? 귀하의 코드는 나에게 잘 보인다. – zgood

'.Title'에 내용이있는 경우'.Viewer' div가 나머지 공간을 차지하기를 원합니다. 현재 크롬에서 최소한 '.Window'에서 오버 플로우됩니다. http://jsfiddle.net/qHe29/ – Danny

사실 @Danny입니다. 그것은 제목에 내용이있는 경우 .Window를 오버플로합니다. 지금 나는 선 높이가있다 : 50px; .title – Joe

아래 시작해야, 예를 들어, JS없이 작동해야합니다).

- 편집은 (. 다른 매개 변수를 참조하고 있지 않습니다 부분은 무효입니다) -

그러나 나는 또한 .Windows하지 높이 매개 변수가 있습니다 것으로 나타났습니다. 은 무엇입니까? 뷰어는 100 % 높이로 작성해야할까요? 기본 div는 필요에 따라 확장되므로 현재 () .Window의 높이는 입니다. 제목은 높이 입니다 .Viewer 높이는 이해할 수있는 것처럼 묻고있어.

출처

2012-03-08 20:32:10 Pijusn

상단 및 하단 값이 있으므로 브라우저의 크기에 상대적으로 div의 높이가 설정됩니다. –

'top'과'bottom'을 가진 절대 위치 요소의'height'가 자동으로 계산됩니다. – Zeta

아, 그리워. 이 매개 변수를 알지 못했습니다. 내 잘못이야. – Pijusn

100 % 너비와 크기 조정 부모 사업부의 높이 - CSS

답변

관련 문제