2016-08-23 6 views
5

연락처 페이지를 만든 후 연락처 양식 바로 뒤에 페이지 하단에 붙이려는 꼬리말 div를 원합니다.페이지 하단에 div 스틱 만들기

하지만 컨테이너 div에 100 %를 모두 입력하면됩니다. 하단 바닥 글 만들기 : 0;

#footer{ 
    background-color:#fff; 
    font:bold 14px; 
    color:#1E88E5; 
    width:100%; 
    height:auto; 
    padding:1%; 
    border-top:1px solid #1E88E5; 

} 

바닥 글 그냥 몇 가지를 중심으로 텍스트 기압을 사용하여 일반 전체 폭의 사업부입니다 : 다음 페이지, 당신은

내 CSS를 지금까지이 ... 등, 스크롤해야 "너무 오래"입니다.

+0

스크롤 없이도 바닥 글을 표시 하시겠습니까? –

+0

가능한 복제본 : [스크롤바가있는 경우에도 항상 페이지 내용의 맨 아래에 div를 유지하십시오.] (http://stackoverflow.com/questions/8824831/make-day-at-bottom-of-pages- content-all-the-time-even-there-are-scrol) – AlexG

+1

항상 아래쪽에 표시하고 싶지는 않습니다 ... 페이지 끝까지 붙여야하지만 페이지가 " 더 길다 "면 아래로 스크롤 한 다음 바닥 글을 보게됩니다. – mheonyae

답변

1

끈적한 바닥 글이 필요한 경우 2 가지 솔루션으로 만들 수 있습니다.

해결 방법 1 :

HTML :

<div class="wrap"> 
    Content 
</div> 
<div class="footer"> 
    Sticky Footer 
</div> 

CSS :

body, html, .wrap{ 
    height:100%; 
} 

body > .wrap{ 
    height:auto; 
    min-height:100%; 
} 

.wrap:after { 
    content: ""; 
    display: block; 
    height: 100px; 
} 

.footer{ 
    background:#662e8c; 
    margin-top:-100px; 
    height:100px; 
    color:#fff; 
    position:relative; 
    line-height:180%; 
    padding:0 10px; 
} 

예 : https://jsfiddle.net/ta1amejn/


(테이블 속성으로) 해결 방법 2 :

HTML : 내용 바닥 글

CSS :

body{ 
    display:table; 
    width: 100%; 
} 

html, body{ 
    height:100%; 
} 

.main{ 
    height:100%; 
    width:100%; 
    padding-bottom:20px; 
    background:#eee; 
    display:table-row; 
} 

.footer{ 
    /*height:30px;*/ 
    line-height:30px; 
    width:100%; 
    background:#00f0ad; 
    display:table-row; 
} 

예 : https://jsfiddle.net/zbtaoq1b/


,691 당신이 고정 된 바닥 글 사용이 솔루션을 원하는 경우 363,210

:

.footer{ 
    position: fixed; 
    bottom: 0; 
} 
4

을 당신은 아마 이것을 달성하기 위해 position: fixed를 사용할 수 있습니다. 당신이 그렇게 padding-bottom 바닥 글의 높이입니다 .main에 추가 제안 페이지 하단을 상쇄해야합니다이와

.footer { 
    position: fixed; 
    bottom: 0; 
} 

. 나를 위해 정말 잘

.main { 
    padding-bottom: 30px /*whatever the height of your footer is*/ 
} 
0

Pritesh Gupta's solution 작품 :

나는 경우에 코드를 붙여 + 복사있어 자신의 사이트가 다운 : 여기의

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sticky Footer</title> 
    </head> 

    <body> 
    <main>stuff</main> 
    <footer>&copy; 2016</footer> 
    </body> 
</html> 

: 여기

는 HTML의 CSS :

body { 
    margin: 0; 
} 

main { 
    min-height: calc(100vh - 4rem); 
} 

footer { 
    height: 4rem; 
} 

예전 브라우저에서 작동하는지 모르겠지만 나 자신에 대해 그렇게 걱정하지 않습니다.

푸터의 높이를 아는 사람에 따라 다르지만 위의 코드에서 수동으로 높이를 설정하지 않아도된다는 사실을 알고 있으면 언제든지 알아낼 수 있습니다. 얼마나 많은 내용이 수직 패딩 라인 높이 ...이 도움이

희망, 나는이 기술을 가로 질러 other 기술 동안 비틀 전에 웹에있는 모든 단일 끈적 끈적한 바닥 글 자습서를 시도하는 아침의 대부분을 보냈다이 하나를 작동 할 최소한의 노력 만 필요하다.

0

display: flex으로 쉽게 할 수 있습니다. 높이 body 또는 wrapper 태그는 신경 쓰지 않아도됩니다.

예 : 원하는 경우 (position: fixed되지 않음) 아래로 footer 항상 끈적 main tag 값의 높이를 변경하십시오.

https://codepen.io/tronghiep92/pen/dzwRrO

HTML 마크 업

<div id="wrapper"> 
    <header>my header</header> 
    <main>main content, please change height</main> 
    <footer> 
    my footer 
    </footer> 
</div> 

CSS 솔루션

#wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
    margin-top: auto; /* this is the solution */ 
} 

main { 
    height: 100px 
} 

또는 수행 할 수 있습니다

#wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
} 

main { 
    flex: 1; 
    height: 100px; 
} 
관련 문제