CSS html 및 body 컨테이너가 콘텐츠 높이까지 늘리지 않았습니다.

많은 콘텐츠를 읽고 내 콘텐츠가 본문 및 HTML 태그를 내 콘텐츠 높이의 100 %까지 늘리지 않도록합니다.CSS html 및 body 컨테이너가 콘텐츠 높이까지 늘리지 않았습니다.

내 페이지가 여기에 있습니다 : http://truerenaissance.devmu.com/artisthighlight/

당신은 (body 태그에 설정) 배경 이미지를 볼 수는 페이지 또는 내부 컨텐츠의 높이를 100 %로 신장되지 않습니다. 나는 위치 : 상대방 만 사용하고 있습니다. 나는 또한 내용의 맨 아래에 'clearfix'를 사용하고있다. 누군가 이런 일이 발생하는 이유에 대한 아이디어가 있다면 정말 감사하겠습니다.

html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; } 
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75); 
     padding: 0px; z-index: 10; } 
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; } 
.clear:before, 
.clear:after { 
    content:""; 
    display:table; 
} 
.clear:after { 
    clear:both; 
} 
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; } 

<html> 
    <body> 
    <div id="body-wrapper"> 
     <div id="site-wrapper"> 
     <div class="inner"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

감사합니다.

출처

2014-04-03 Ryan Weiss

배경 이미지를 고정시키고 싶습니까? – James

나는 screeen 크기가 무엇이든 상관없이 배경을 폭에 맞게 완전히 넣기를 원합니다. 그리고 배경 이미지가 전체 높이가되도록하고 싶습니다. 왜냐하면 여기에서 사용하는 배경 이미지가이 페이지의 전체 높이를 늘리지 않기 때문입니다. 이 경우 배경 이미지를 편집하여 페이드를 아래쪽에 배치 할 계획입니다. 또한 배경 컨테이너 (이 경우에는 본문)가 있어야 페이지의 100 %까지 늘어납니다. –

그 경우'# site-wrapper'의'height : 100 %'를 제거하십시오 – James

몸 높이를 뷰포트 높이로 제한 했으므로 배경을 세로로 늘리지 않았습니다. html 및 body에서 height: 100%을 제거하고 background-size의 cover 값을 사용하십시오.

그런데 큰 엉덩이 사진을 보내 주셔서 감사합니다.

출처

2014-04-03 16:56:07 MatTheCat

와우는 높이를 알지 못했습니다 : 100 %는 뷰포트의 높이로갔습니다. 매일 무언가를 배우십시오. snide 코멘트 주셔서 감사합니다. –

한 가지 더 많은 문제가 여기에 나타났습니다. 내가 게시 한 원본 페이지가 현재 작동하고 배경 (body/html)이 높이를 제거한 후에 늘어납니다 : 100 %; 그러나 이후 페이지에서 내용이 페이지의 전체 높이에 맞지 않으면 높이 (100 %)를 제거했기 때문에 배경 (body/html)이 전체 페이지로 늘어나지 않습니다. 콘텐츠 자체가 늘어나지 않는 경우에만 배경을 뷰포트의 전체 높이까지 늘리려면 어쨌든 가야합니다. 또한 배경이 내용 높이까지 늘어나는 원래의 경우에서 작업하는 것이 좋을 것입니다. 이것이 가능한가? –

여기에 해당 페이지가 있습니다 : Original : http://truerenaissance.devmu.com/artisthighlight/ 다른 짧은 페이지 내용 : http://truerenaissance.devmu.com/about/ –

CSS html 및 body 컨테이너가 콘텐츠 높이까지 늘리지 않았습니다.

답변

관련 문제