전체 웹 사이트의 테두리

Question

전체 웹 사이트를 둘러싼 경계를 만드는 현명한 방법을 찾고 있습니다.

문제는 내가 속성 width: 100%와 height: 100%와 뷰포트 전체에 걸쳐 스트레칭해야 배경으로 DIV .teaser-image를 해결 한 것을, 그래서 그렇지 않으면 고정 사업부가 아니라,이 값에도 html과 body을 설정해야 그것의 내용만큼 높다.

테두리를 body에 추가하면 높이가 100 %로만 감싸지 만 전체 사이트는 늘어나지 않습니다.

이 아이디어를 해결하는 방법은 무엇입니까?

http://jsfiddle.net/cJgBs/

HTML

<div class="teaser-image"></div> 

<header> 
    <h1>Headline</h1> 
    <p>Some content</p> 
</header> 

<section> 
    <h1>Headline</h1> 
    <p>Some content</p>  
</section>   

<section> 
    <h1>Headline</h1> 
    <p>Some content</p>  
</section> 

CSS

html, 
body { 
    margin: 0; 
    height: 100%; 
    color: #fff; 
} 

body { 
    border: 10px solid #000; 
} 

.teaser-image { 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg) center center no-repeat; 
    background-size: cover; 
} 

header, 
section { 
    width: 100%; 
    min-height: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
} 

section { 
    background: rgba(255, 255, 255, .5); 
} 

Answer 1

UPDATE : 뷰포트와 같은 높이를 가지고 헤더/섹션을 원하는 경우, 당신은 단순히 min-height: 100vh;을 사용할 수 있습니다

헤더와 섹션의 최소 높이를 100 %로 설정할 때 주된 문제가 있다고 생각합니다. 이것은 각 헤더/섹션의 높이가 부모의 높이보다 크거나 같아야 함을 의미합니다. 그러나 헤더와 섹션의 부모는 페이지 본문이므로 본질적으로하려는 것은 3 개의 자식 요소를 포함하는 요소와 동일한 높이로 만듭니다. 명확하게 정의되지 않은 요소입니다.

헤더/섹션 최소 높이를 일정한 값 (예 : 300px)으로 설정해야합니다. 변경해야 할 또 다른 사항은 html/body height입니다. 100 %로 설정하면 자랄 수 없습니다. 높이 대신에 여기에서 최소 높이를 사용할 수 있습니다. 마지막으로, 심미적 인 이유 때문에 top : 0; 당신의 티저 이미지 클래스 :

CSS

html, 
body { 
    margin: 0; 
    min-height: 100%; 
    color: #fff; 
} 

body { 
    border: 10px solid #000; 
} 

.teaser-image { 
    top:0; 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg) center center no-repeat; 
    background-size: cover; 
} 

header, 
section { 
    width: 100%; 
    min-height: 300px; 
    padding: 20px; 
    box-sizing: border-box; 
} 

section { 
    background: rgba(255, 255, 255, .5); 
} 

위의 변경 사항을 적용의 결과는 here를 볼 수 있습니다. 테두리가 이제 전체 페이지를 래핑합니다. 경계가 현재 뷰포트 만 감싸도록하려면 this과 같은 것이 필요할 것입니다.