콘테이너의 높이

Question

우리는 CSS3와 HTML5를 사용하고 있습니다. 일부 그라디언트를 표시 할 div가있는 페이지를 작성하려고합니다. 그런 다음 머리글이오고 머리글 뒤에는 컨테이너가옵니다.

이것은 내가 작성한 것이며 더미 라인을 추가하기 전까지는 잘 작동하고 있습니다.

html { 
    height: 100%; 
} 
body { 
    margin: 0px; 
    height: 100%; 
} 
.container { 
    height: 100%; 
} 
.oss-gradient { 
    height: 5px; 
    min-width: 1024px; 
    background: yellow; 
} 
.header { 
    height: 40px; 
    min-width: 1024px; 
    background: #def; 
} 
.content-wrapper { 
    width: 1024px; 
    height: calc(100% - 45px); 
    background: #defabc; 
    margin: 0px auto; 
} 

내 HTML,

<div class="container"> 
    <div class="oss-gradient"> 
    </div> 
    <div class="header"> 
    </div> 
    <div class="content-wrapper"> 
     <!-- some dummy lines here //--> 
    </div> 
</div> 

가 그럼 난 최소 높이를하는 내용 래퍼의 높이 속성을 변경,

CSS 니펫을 Click here 샘플을 볼 수 이것은 코드입니다. 그런 다음 잘 작동했습니다. 확대/축소 수준과 브라우저 창의 크기를 변경하려고하면 잘 작동합니다. 그런 다음 나는 방화범을 피우고 contianer div, body 및 html 요소를 맴돌았다. 나는 content-wrapper 요소가 container div에서 나왔다. 다시 말해 container, body 및 html은 content-wrapper 요소로 확장되지 않았습니다.

그런 다음 container div에 대한 min-height 속성을 추가하여 wrt content-wrapper를 확장한다고 생각했습니다. 그런 다음 페이지에서 축소하여 내용 래퍼가 사용 가능한 높이를 확장하지 않는 것으로 나타났습니다.

그런 다음 컨테이너의 html, body 및 min-height 속성에서 height 속성을 제거했습니다. 이제 세 가지 요소가 모두 아동에게 확대됩니다. 하지만 모든 더미 라인을 제거하면 내용 래퍼 div가 보이지 않습니다.

어떻게 해결할 수 있습니까?

Answer 1

당신은

body { 
    margin: 0px; 
    min-height: 100%; 
} 

당신은 참조 할 수 body 요소 min-height를 사용하고 (더 많은 콘텐츠로) 당신의 html 요소

Demo (커버 전체 페이지)

Demo 2에 background를 사용할 필요가 비슷한 질문에 대한 내 질문 here.