HTML 콘텐츠를 사용 가능한 모든 높이를 차지하는 방법?

다음의 jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/을 살펴보십시오 (질문의 본문 뒤에 코드가 있습니다).HTML 콘텐츠를 사용 가능한 모든 높이를 차지하는 방법?

기존의 머리글, 내용, 바닥 글 HTML 레이아웃의 간단한 예입니다.

내용은 결코 바닥 글과 중복되지 : 알 수 있습니다. 창의 크기를 조정하면 내용을 바닥 글 위로 이동하는 대신 세로 스크롤 막대가 만들어집니다.
중복 된 스크롤 막대가 없습니다.
바닥 글을 제외하고는 절대 높이가 없으며 2em 이하 여야합니다.
내용 높이가 머리글과 바닥 글 사이의 사용 가능한 높이보다 작습니다.

콘텐츠 높이가 머리글과 바닥 글 사이의 전체 높이가되도록 마지막 세 속성을 유지하고 싶습니다. 그리고 자바 스크립트를 사용하지 않고 그렇게하고 싶습니다.

나는 어떻게 할 수 있습니까?

EDIT

주어진 HTML 및 CSS는 단지 일례이다. 최종 결과가 내 질문의 조건을 충족시키는 한 자유롭게 변경할 수 있습니다.

EDIT2

분명히, 나는 내용으로 달성하고자하는 것을 매우 명확하지 않다. 다음은 현재 가지고있는 내용입니다. enter image description here

내용이 머리글과 바닥 글간에 사용 가능한 전체 높이까지 확장되지 않습니다.

은 내가 후에 나는 것은 이것이다 : enter image description here

3 조건 조항을 제외하고

EDIT3

추가 된을 (MSPAINT에서 편집, 난 정말 그것을 해야할지 모르겠어요)

바닥 글을 제외하고는 2em 이하 여야합니다.

HTML :

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css"> 
</head> 
<body> 
<div class="container"> 
<div class="header"> 
    Header goes here. 
    </div> 

    <div class="content"> 
    <div class="innerWrapper"> 
     Content goes here. 
     </div> 
    </div> 

    <div class="footer"> 
    <div class="status"> 
     Footer goes here. 
    <div> 
    </div> 
</div> 
</body> 
</html>

CSS :

html, body { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    position: relative; /* needed for footer positioning*/ 
    margin: 0 auto; 
    height: auto; 
    min-height: 100%; 
    background-color: #ddd; 
} 

.content { 
    padding: 0em 0em 2em; /* bottom padding for footer */ 
    background-color: #bbb; 
} 

.footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
} 

.status, .header { 
    background-color: #999; 
    border: solid 1px #000000; 
}

출처

2012-10-25 mark

태그는 어디에 있습니까? 가 닫히지 않았습니다. –

나는 나의 칭의에 대해서만 "죄송합니다"라고 말할 수 있습니다. – mark

이 작업을 수행하는 몇 가지 방법,하지만 순간에 내가 생각할 수있는 유일한 방법이 될 수있는 모든 머리말과 꼬리말의 높이를 설정하거나 알고 있어야합니다.여기

는 display:tablehttp://jsfiddle.net/fLnkf/

사용자의 요구 사항은 당신이 당신의 HTML 또는 사용 CSS3을 변경할 수 있습니다 경우에 따라 다른 해결책이있을 수 있습니다 사용하는 것입니다.

희망이 도움이됩니다.

출처

2012-10-25 19:26:54 brains911

꼭 HTML과 CSS를 변경하십시오. 질문의 조건이 충족되는지 확인하십시오. – mark

중복 수직 스크롤바가 있습니다 - 조건 2를 깨기. – mark

재미있는 질문 :) 다음 두 가지 옵션이 있습니다 : http://jsfiddle.net/FeeaD/](http://jsfiddle.net/FeeaD/). 출혈 가장자리 CSS3를 사용하고 자바 스크립트 크기 조정 일부 창에서 다시 떨어지는. – brains911

HTML 콘텐츠를 사용 가능한 모든 높이를 차지하는 방법?

답변

관련 문제