위치 및 계산없이 나머지 높이와 일치하도록 div의 높이를 설정하십시오.

파이어 폭스 10 인 경우 내 대상 브라우저. 다른 두 개의 부분으로 둘러싸여 있습니다. 첫 번째는 머리글을 나타내고 두 번째 것은 머리글을 나타냅니다. 주변 div는 컨테이너를 나타냅니다. header div의 높이가 50px이고 나머지 높이를 차지하려면 body div가 필요합니다. 이 샘플 코드를 작성했고 body div가 컨테이너의 높이를 사용하고 스크롤 막대를 가져 오는 것을 봅니다. 위치 및 계산없이 나머지 높이와 일치하도록 div의 높이를 설정하십시오.

body, html { 
    margin: 0px; 
    height: 100%; 
} 
.container-style { 
    height: 100%; 
} 
.header-style { 
    border: 1px solid black; 
    height: 50px; 
} 
.body-style { 
    border: 1px solid black; 
    height: 100%; 
}

<div id="container" class="container-style"> 
    <div id="header" class="header-style"> 
    </div> 
    <div id="body" class="body-style"> 
    </div> 
</div>

I는 다음의 CALC css5 방법을 사용하여 해결. 아래 코드는

.body-style { 
    border: 1px solid black; 
    height: calc(100% - 50px); 
}

입니다.하지만 css5를 지원하지 않는 브라우저에서는 작동하지 않습니다. 그럼 나는 그것을 달성 할 CSS 위치 속성을 사용.

.body-style { 
    border: 1px solid black; 
    position: absolute; 
    height: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    padding-top: 50px; 
    width: 100%; 
    top: 0px; 
    left: 0px; 
}

다른 브라우저에서 작동하는지 여부를 알 수 없습니다. 하지만 최소한 firefox 10에서는 작동합니다.

나는 css position 속성과 쉬운 해결책을 사용하지 않는 해결책이 있는지 알고 싶습니다.

출처

2013-12-10 Krishna Chaitanya

안쪽 여백 대신 상단 여백 사용 – Igle

그 모양은 그대로입니다. 문제가 있다면 어떻게됩니까? 콘텐츠로 콘텐츠를 동적으로 확장하거나 원하는 위치에 유지하고 스크롤 할 수 있도록 시체를 원하십니까? – leigero

@leigero 예 잘 작동합니다. 그러나 나는'position : absolute'를 사용하지 않고 다른 해결책이 있는지 알고 싶었습니다. –

padding-top에 대응하려면 음수 인 margin-top을 추가해야합니다. 귀하의 padding-top 현재 50 픽셀 동일하지만 헤더 요소는 1 픽셀 테두리가 있으므로 padding-top 따라서 145 픽셀 같아야한다 :

.body-style { 
    ... 
    padding-top: 52px; 
    margin-top: -52px; 
}

는

.body-style { 
    ... 
    padding-top: 52px; 
}

귀하의 margin-top는 -52px와 동일해야합니다

귀하의 .body-style 선택은 이제 다음과 같이 표시됩니다

.body-style { 
    border: 1px solid black; 
    height: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    padding-top: 52px; 
    margin-top: -52px; 
    width: 100%; 
}

JSFiddle demo합니다.

출처

2013-12-10 09:05:07

위치 및 계산없이 나머지 높이와 일치하도록 div의 높이를 설정하십시오.

답변

관련 문제