바닥 글에 있지 않은 바닥 글 페이지

Question

바닥 글 밑에 공간이 많습니다.이 공간은 바닥에 많은 공간이 있습니다. 어떤 이유로이 공간은 Firefox가 아닌 Google 크롬에서만 나타납니다.

이미지를 보여주는 이미지입니다. 나는이 일이하고 싶은 무엇

http://puu.sh/a6XQI/ec07f0ba31.jpg

화면 크기에 따라 내 콘텐츠 크기 조정입니다. 나는 많은 콘텐츠를 가지고 있지 않기 때문에 내가 할 수 있는지, 단지 몇 개의 이미지가 있는지 확신 할 수 없다.

의견을 보내 주시면 감사하겠습니다.

Answer 1

코드를 제공하지 않으므로 페이지 높이가 창 높이보다 더 짧다고 가정합니다. 인쇄 디자인 배경에서 오는 많은 사람들은 종종 바닥 글이 페이지의 맨 아래에 자동으로 나타나지 않는다는 개념에 당혹 스럽습니다. 동적으로 크기가 조정되는 요소의 위치는 콘텐츠에 따라 달라집니다. 사용자가 알아낼 수있는 것처럼 클라이언트가 콘텐츠를 제공하기 전에 웹 사이트를 구축하기를 원할 때 매우 실망 스럽습니다. 그러나 나는 빗 나간다.

jsFiddle : 루트 문제를 가정

는

내 전 가정, 기존의 페이지 structions에 다음을 구현, 끈적 끈적한 바닥 글로 알려진 달성하기에 의해 발생 http://jsfiddle.net/63mp6/

HTML

<div class="primary"> 
    <div class="header"> 
     Header Content 
    </div> 
    <div class="content"> 
     Main body Content 
    </div> 
    <div class="footer"> 
     Footer content 
    </div> 
</div> 

CSS

,

*{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
html, body { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #eee; 
} 
.primary { 
    position: relative; 
    width: 80%; 
    height: 100%; 
    margin: 0 auto; 
} 
.header{ 
    min-height: 100px; 
    min-width: 100%; 
    background: #aaa; 
} 
.content { 
    min-width: 100%; 
    min-height: 200px; 
    background: #fff; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    min-height: 100px; 
    background: #666; 
} 

기본 스타일을 상위 컨테이너로 재설정하여 창 높이를 100 %로 설정 한 다음 기본 페이지 흐름에 대한 바닥 글 위치를 상위 컨테이너의 바닥에 표시합니다. primary 및 html, body 정의에 대한 position: relative; 특성을 확인하십시오. 그것들은 자식 엘리먼트의 음색을 창 대신에 상대적으로 설정합니다. 위치 선언이 없으면 자식 요소는 창 자체가 될 상대 위치로 가장 높은 요소에 위치합니다.