콘텐츠가 충분히 크지 않더라도 끈적이지 않고 화면 하단에 내 바닥 글 넣기

Question

매우 간단한 질문이 있습니다. 내 콘텐츠가 화면을 채우기에 충분하지 않을 때 바닥 글이 나타나서 좀 지저분 해 보인다. 여기를 일반 노트북 모니터에서 볼 수 있습니다 : http://www.dlgt.co

해당 페이지에서 바닥 글을 계속 낮추려면 어떤 트릭이 필요합니까? 나는 끈적 거리지 않고 싶다. 나는 성공하지 않고 콘텐츠 컨테이너 (#loading_effect)에 최소 높이 : 100 %를 설정하려고했습니다. px 작품의 특정 최소 높이와 비슷하지만 모든 모니터에서 작동하지는 않습니다.

감사합니다.

Answer 1

html, body 및 기본 콘텐츠에 height: 100%을 추가하십시오. 그러면 바닥 글이 화면 바깥으로 이동합니다. 꼬리말의 높이와 동일한 음수 인 margin-bottom을 기본 콘텐츠에 추가하면 바닥 글이 다시 위쪽으로 이동합니다. 예를 들어 http://codepen.io/ckuijjer/pen/wbony을 참조하십시오.

편집 : 좋아요, 완전히 작동하지 않았습니다. 바닥 글의 높이와 동일한 min-height: 100%, box-sizing: border-box 및 padding-bottom을 사용하여 다시 시도하십시오. http://codepen.io/ckuijjer/pen/jFgwd

Answer 2

또는 본문에 바닥 글 배경을 사용해보십시오. 그것을 사용하기 전에, 모든 섹션이 다른 배경과 너비가 100 %이어야하는 구조를 재구성해야합니다.

솔루션이있다 : http://codepen.io/anon/pen/kBLar

---

또는이 - HTML :

<header> 
    <div class="container"> 
    <h1>Title</h1> 
    </div> 
</header> 
<article> 
    <div class="container"> 
    Content 
    </div> 
</article> 
<footer> 
    <div class="container"> 
    &copy; Copyright 2014 
    </div> 
</footer> 

과 CSS가 : 내가 원하는 무엇

body{ 
    margin:0; 
    background:#222; 
    color:#222; 
} 

header{ 
    background:#ccc; 
} 

article{ 
    background:#fff 
} 

footer{ 
    color:#ccc; 
} 

.container{ 
    max-width:960px; 
    margin:0 auto; 
    padding:20px; 
} 

Answer 3

가 바닥 글에있을 것이 었습니다 브라우저 창 하단에 내용이 브라우저 창을 채울만큼 길지 않은 경우 (비 끈적임)에만 표시됩니다.

CSS 함수 calc()를 사용하여 얻을 수있었습니다. 현재 대부분 지원됩니다.

<div class="container">CONTENT</div> 
<div class="footer"> 
</div> 

는 CSS :

.container 
{ 
    min-height: 70%; 
    min-height: -webkit-calc(100% - 186px); 
    min-height: -moz-calc(100% - 186px); 
    min-height: calc(100% - 186px); 
} 

변경 (186) 바닥 글의 크기에 당신과 같은 사용할 수 있습니다.