379

페이지 http://www.workingstorage.com/Sample.htm하단에 앉을 수없는 바닥 글 이있는 다음 페이지 (deadlink :) 가 있습니다.

바닥 글을 원합니다

페이지가 짧고 화면이 채워지지 않으면 창 아래쪽에 붙어
내용이 겹치는 대신 화면이 많은 내용이있는 경우 문서 끝에 머물면서 정상적으로 아래로 이동하십시오.

CSS는 상속되어 나를 괴롭 힙니다. 내용에 최소 높이를 놓거나 바닥 글을 맨 아래로 이동하도록 올바르게 변경할 수없는 것 같습니다.

css footer

— 카베 아트 롭
소스

16

이것이 일반적인 문제라는 것은 놀라운 일입니다. CSS4에서는 "nav nav bar 만들기"와 "footer 만들기"가 자주 시도되기 때문에이 구현을 볼 수있을 것입니다.

— 동 형사상

1

CSS4는 없을 것입니다 (CSS3는 계속 커질 것입니다). 나는 이것이의 구현으로 해결 될 것이라고 생각합니다 flexbox.

— Marijke Luttekes

1

이에 대한 훌륭한 기사 : css-tricks.com/couple-takes-sticky-footer

— Phil

expertuggestion.com/css-snippets/8

— Lalit Baghel

345

간단한 방법은 몸 만드는 것입니다 100%로, 페이지의을 min-height의 100%도. 바닥 글의 높이가 변경되지 않으면 잘 작동합니다.

바닥 글에 음수 여백을 지정하십시오.

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

— 존 윈스턴 리
소스

27

바닥 글의 높이를 미리 알고있는 경우에만 작동합니다. 바닥 글에 동적 내용이 있거나 프레임 워크를 구축하는 경우가 있습니다. 가변 높이 바닥 글에 대한 아이디어가 있습니까?

— Costa

@Costa 는 가변 높이 바닥 글과 작동하는 솔루션에 대한 내 대답을 확인 하십시오 .

— 호세 루이 산토스

동적 콘텐츠의 경우 '높이'를 생략하면 바닥 글이 콘텐츠에 맞게 조정됩니다. 모든 브라우저에서 테스트되지는 않음

— m47730

이것은 box-sizing: border-box;몸과 몸에 필요할 수 있습니다 #container.

— konsolebox

이것은 많은 이상한 트릭처럼 보입니다. 아래에 간단한 답변이 있으며 트릭을 사용하지 않습니다.

— 앤드류 코스터

165

바닥 글을 바닥에 고정하는 매우 쉬운 방법을 개발했지만 가장 일반적인 방법으로 바닥 글의 높이에 맞게 조정해야합니다.

데모보기

Flexbox 방법 :

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

스 니펫 확장

아래의이 방법은에 ::after의사 요소를 배치하여 "트릭"을 사용 하고 바닥 글 body의 정확한 높이 를 갖도록 설정 absolute합니다. 바닥 글이 실제로 공간을 차지하고 절대 위치의 부정적인 영향을 제거하는 것처럼 보입니다 (예 : 본문 내용을 넘어 감).

`position:absolute` 방법 : (동적 바닥 글 높이를 허용하지 않음)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

스 니펫 확장

테이블 레이아웃 방법 :

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

header {
  height: 50px;
  background: lightcyan;
}

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


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

스 니펫 확장

— vsync
소스

간단하고 우아하며 더 중요하게 작동합니다. 로 div를 추가하기 시작하면 다른 솔루션이 실패합니다 display: table display: table-row display:table-cell. 그러나 body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}스크롤 막대를 피하기 위해 추가해야한다는 것을 알았습니다 . 조정하여이를 충족시킬 수 body:after height있지만 px가 아닌 rem에 내 것을 지정하여 문제가됩니다.

— Steve Waring 2016 년

3

@SteveWaring-감사합니다. 이 답변은 꽤 오래되었으므로 업데이트되었습니다. 지금은 사용에 찬성 해요flexbox

— VSYNC

1

"기본 공통 마크 업"의 CSS에 작은 오류가 발생하여 작동하지 않습니다 (오류가 링크 된 "DEMO"에 존재하지 않음). 나는 그것을 고칠 자유를 가져 갔다.

— sleske

3

감사합니다! flexbox 솔루션은 실제로 간단하며 해킹이나 이상한 고정 크기 또는 고정 위치를 사용하지 않습니다.

— 앤드류 코스터

1

이 데모는 유일하게 작동합니다! 환상적입니다, 감사합니다!

— Drakinite

51

훌륭한 크로스 브라우저에서 작동하는 매우 간단한 접근법은 다음과 같습니다.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

스 니펫 확장

— 타마스 파프
소스

34

나는 바닥 글을 바닥에 붙이기 위해 이것을 사용했고 그것은 나를 위해 일했다 :

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

즉, 당신은 HTML에서 할 수있는 유일한 수정의, 그 추가 div와 "allButFooter"클래스입니다. 나는 모든 페이지, 너무 짧은 페이지, 바닥 글이 바닥에 붙어 있지 않다는 것을 알았으며 이미 스크롤해야한다는 것을 알기에도 충분히 긴 페이지로 수행했습니다. 나는 이것을 했으므로 페이지의 내용이 역동적 인 경우 제대로 작동한다는 것을 알 수 있습니다.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"클래스는이 min-height뷰포트의 높이에 따라 값 ( 100vh나는 이미 알고 있었다, 뷰포트의 높이의 100 %를 의미)과 바닥 글의 높이를 40px.

그것이 내가 한 전부이며 완벽하게 작동했습니다. Firefox, Chrome 및 Edge 만 모든 브라우저에서 시도하지 않았으며 원하는 결과를 얻었습니다. 바닥 글이 아래쪽에 붙어 z- 색인, 위치 또는 기타 속성을 망칠 필요가 없습니다. 내 문서의 모든 요소의 위치가 기본 위치였습니다. 절대 또는 고정 또는 다른 것으로 변경하지 않았습니다.

반응 형 디자인 작업

여기에 정리하고 싶은 것이 있습니다. 40px 높이의 동일한 바닥 글이있는이 솔루션은을 사용하여 반응 형 디자인으로 작업 할 때 예상대로 작동하지 않았습니다 Twitter-Bootstrap. 함수에서 빼고 있던 값을 수정해야했습니다.

.allButFooter {
    min-height: calc(100vh - 95px); 
}

아마도 Twitter-Bootstrap자체 여백과 패딩이 포함되어 있기 때문에 그 값을 조정해야했습니다.

나는 이것이 당신들에게 약간의 도움이되기를 바랍니다! 최소한 시도하는 간단한 솔루션이며 전체 문서를 크게 변경하지는 않습니다.

— 라리 유
소스

이 문제에 대한 모든 종류의 솔루션에 문제가 있습니다. 이 솔루션은 내 페이지에서 작동하며 display: none감사를 사용하여 본문에 표시되는 내용이 다릅니다 . 좋고 간단합니다.

— Steve Waring

많은 시간 동안 해결책을 시도한 후에 두 사람 만 일했습니다. position: fixed; bottom: 0그리고 이것. 바닥 글이 맨 아래에 붙어 있지 않지만 스크롤 가능한 페이지의 끝에 머물러 있기 때문에이 솔루션이 가장 좋습니다.

— Hmerman6006

답변을 바탕으로을 설정하여 다른 방법으로 볼 수 있습니다 .footer {max-height: calc(100vh+40px); position: absolute}. 그것이 작동하기 때문에, 당신은 당신의 몸 크기를 알아야합니다.

— Hmerman6006

29

IE7부터는 간단하게 사용할 수 있습니다.

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

지원을 받으려면 캐니 우스 를 참조하십시오 .

— 리암
소스

77

바닥 글을 넘어서 내용이있을 때 바닥에 바닥 글을 원하지 않습니다. 바닥 글이 충분하지 않으면 바닥 글이 바닥에 붙어 있고 화면이 충분하지 않으면 바닥이 평소와 같이 확장되기를 원합니다. 끈적 끈적한 바닥 글이 이것을 해결했습니다.

— Caveatrob

@Caveatrob : 오해를 피하기 위해이 중요한 정보를 귀하의 질문에 자유롭게 편집 할 수있었습니다 (미래 독자들을 위해, 그 동안 아마 이것을 해결했습니다 :-)).

— sleske

이 솔루션은 모든 페이지에 바닥 글을 인쇄하는 유일한 솔루션이며 매우 간단합니다! 그러나 내용이 기본 내용과 겹치지 않도록 작동시킬 수 없습니다. 누구든지 이것에 대한 해결책을 얻었습니까?

— Hatzen

15

내가 사용하는 간단한 솔루션은 IE8 +에서 작동합니다.

html에 min-height : 100 %를 지정하여 내용이 적을 경우 여전히 페이지가 전체 뷰포트 높이와 페이지 하단에 바닥 글 스틱을 사용하도록합니다. 내용이 증가하면 내용과 함께 바닥 글이 아래로 이동하고 계속 아래로 고정됩니다.

JS 바이올린 작업 데모 : http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

— 산 예프
소스

좋은 ..하지만 그냥 업데이트 .pageContentWrapper {padding-bottom : 100px; / * 바닥 글 높이 * /}

— Subodh Sharma

고마워 Angular 7 작업

— Carlos Torres

가능한 경우 불필요한 스크롤 막대를 만들고 싶지 않습니다.

— Константин Ван

14

그러나 또 다른 간단한 해결책은 다음과 같습니다.

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

트릭은을 사용하는 것입니다 display:table전체 문서와 display:table-row함께 height:0바닥 글.

바닥 글은으로 표시되는 유일한 본문 자식이므로 table-row페이지 하단에 렌더링됩니다.

— 호세 루이 산토스
소스

나는 CSS 테이블을 좋아하지만 꽤 이상한 줄을 만들어냅니다. stackoverflow.com/questions/24898115/…

— Costa

1

이 솔루션은 완벽하게 작동하지 않는 것 같습니다. Firefox는 바닥 글 높이 0을 무시합니다. 대신 높이 1px 또는 1 %를 사용했습니다. Edge, IE11, Chrome 및 모바일 사파리는 0에 만족합니다.

— Kitet

나는이 솔루션을 정말 좋아한다. 그러나 이와 같이 레이아웃을 만들면 자식 요소의 브라우저 계산이 더 중요합니다. 페이지 상단에 컨테이너가 있고 height: 100%뷰포트 비율이 1/1 (정사각형) 일 때 실제로 100 % 여야한다고 가정 해 보겠습니다 . 뷰포트가 넓어지면 (가로) 높이가 100 % 이상, 더 좁 으면 (세로) 100 % 미만이됩니다. 따라서 높이는 창의 너비에 비례합니다. 다른 래퍼로 해결하려고 시도했지만 작동하지 않았습니다. 누군가 해결책을 얻거나 힌트를 얻지 못합니까 ???

— Axel

@Axel이 버전 에서는 뷰포트 너비에 관계없이 모든 높이 (바닥 글 높이 빼기)를 차지하는 100 % 높이의 파란색 div를 추가했습니다. 다른 CSS를 망칠 수 있다고 생각합니다. 내 원래 jsFiddle을 기반으로 문제의 최소화 된 버전을 만들어보십시오.

— Jose Rui Santos

@JoseRuiSantos 답변 주셔서 감사합니다. FireFox 버그 인 것 같습니다. 스크린 샷보기

— Axel

8

고정 높이 또는 요소의 위치 변경을 가정하지 않는 매우 간단한 플렉스 솔루션입니다.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

브라우저 지원

IE11 이하를 제외한 모든 주요 브라우저.

사용하십시오 Autoprefixer을 적절한 접두사.

코드 스 니펫 표시

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

스 니펫 확장

— 스피라 토스
소스

매력처럼 일했다! 바닥에 4K 이상의 바닥 글 스틱에 대한

— Arpan Banerjee

7

주의해야 할 것은 모바일 장치입니다. 뷰포트에 대한 아이디어를 '비정상적인'방식으로 구현하기 때문입니다.

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Viewport 사용 /Viewport.html#//apple_ref/doc/uid/TP40006509-SW25

따라서 position: fixed;(다른 장소에서 권장하는 것처럼) 사용하는 것은 일반적으로 갈 길이 아닙니다. 물론, 그것은 당신이 따르는 정확한 행동에 달려 있습니다.

내가 사용하고 데스크탑 및 모바일에서 잘 작동 한 것은 다음과 같습니다.

<body>
    <div id="footer"></div>
</body>

와

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

— 벤 잭슨
소스

6

이 작업을 수행

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

모든 최신 브라우저에서 지원하는 flex에 대해서도 읽을 수 있습니다.

업데이트 : flex에 대해 읽고 시도했습니다. 그것은 나를 위해 일했다. 그것이 당신에게도 똑같이되기를 바랍니다. 여기에 내가 구현 한 방법이 있습니다. 여기는 main이 ID가 아니라 div입니다.

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

여기에서 flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 에 대한 자세한 내용을 읽을 수 있습니다.

이전 버전의 IE에서는 지원되지 않습니다.

— 오르 스 탄델
소스

1

이것이 실제로 가장 좋은 대답입니다. flex-grow: 1바닥 글 위의 무언가를 사용 하면 바닥 글이 바닥에 올바르게 유지됩니다.

— iBug

5

방금 비슷한 질문으로 여기에 대답했습니다.

고정 머리글이있는 페이지 하단에 바닥 글 위치

웹 개발에 익숙하지 않아서 이미 답변을 받았지만 이것이 해결하는 가장 쉬운 방법이며 다른 점이 있다고 생각합니다. 웹 응용 프로그램의 바닥 글의 높이가 동적이므로 FlexBox와 스페이서를 사용하여 유연한 것을 원했습니다.

HTML과 본문의 높이를 설정하여 시작

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

column헤더, 영웅 또는 세로로 정렬 된 콘텐츠를 추가 해야하는 경우 앱 의 동작을 가정합니다 .

스페이서 클래스 만들기

.spacer {
    flex: 1; 
}

나중에 HTML에서 다음과 같이 될 수 있습니다.

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

https://codepen.io/anon/pen/xmGZQL에서 재생할 수 있습니다.

— 카모
소스

5

이것을 끈적 거리는 바닥 글이라고합니다. 구글 검색 그것에 대한 결과를 많이납니다. CSS Sticky Footer 는 내가 성공적으로 사용한 것입니다. 그러나 더 있습니다.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

스 니펫 확장

이 코드의 소스

— 파올로 베르 간 티노
소스

3

내 jquery 메소드는 페이지 내용이 창 높이보다 작 으면 바닥 글을 페이지 하단에 놓거나 내용 뒤에 바닥 글을 넣습니다.

또한 다른 코드보다 먼저 코드를 자체 인클로저에 보관하면 바닥 글을 재배치하는 데 걸리는 시간이 줄어 듭니다.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

— 샘 존스
소스

3

나는이 문제를 조사 해왔다. 나는 꽤 많은 해결책을 보았고 그들 각각에는 종종 마술 숫자가 관련된 문제가있었습니다.

그래서 다양한 출처의 모범 사례를 사용 하여이 솔루션을 찾았습니다.

http://jsfiddle.net/vfSM3/248/

내가 여기서 구체적으로 달성하고 싶었던 것은 주요 내용을 녹색 영역 내부의 바닥 글과 머리글 사이에서 스크롤하도록하는 것이 었습니다.

다음은 간단한 CSS입니다.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

— 후 사이
소스

3

나는 이런 식으로 설계된 사이트가 싫어. 동시에 읽을 수있는 텍스트의 양을 제한하고 싶은 이유는 무엇입니까? 머리글과 바닥 글을 항상 볼 필요는 없습니다. 필요할 때 찾을 위치를 알고 있습니다.

— Tarmil

1

한 번 봐 가지고 @Tarmil numerics.info을 . 이것이 언제 유용한 지 지금 보십니까?

— husayt

3

이것이 내가 같은 문제를 해결 한 방법입니다

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

스 니펫 확장

— 네 무스
소스

3

footer {
  margin-top:calc(5% + 60px);
}

이것은 잘 작동합니다

— 카르 티카에 얀
소스

2

바닥 글 섹션을 맞춤 설정하면됩니다.

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

— rashedcs
소스

작동하지 않는. 매우 큰 페이지가 있어도 항상 맨 아래에 붙어 있습니다. 모든 페이지를 스크롤 할 수는 없지만 맨 아래에 고정하십시오.

— fWd82

작동하지 않습니다. 바닥 글이 콘텐츠 위에 올라옵니다.

— indolentdeveloper

1

여기 내 센트가 있습니다. 다른 솔루션과 비교하여 컨테이너를 추가 할 필요가 없습니다. 따라서이 솔루션은 조금 더 우아합니다. 코드 예제 아래에서 이것이 왜 작동하는지 설명 할 것입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

가장 먼저 할 일은 가장 큰 컨테이너 (html)를 100 % 만드는 것입니다. html 페이지는 페이지 자체만큼 큽니다. 다음으로 본문 높이를 설정합니다. html 태그의 100 %보다 클 수 있지만 적어도 커야하므로 최소 높이 100 %를 사용합니다.

우리는 또한 몸을 상대적으로 만듭니다. 상대적은 블록 요소를 원래 위치에서 상대적으로 이동할 수 있음을 의미합니다. 우리는 여기서 이것을 사용하지 않습니다. 친척이 두 번째로 사용하기 때문입니다. 절대 요소는 루트 (html) 또는 첫 번째 상대 부모 / 조부모에게 절대적입니다. 그것이 우리가 원하는 것입니다. 우리는 바닥 글이 몸, 즉 바닥에 대해 절대적이기를 원합니다.

마지막 단계는 바닥 글을 absolute 및 bottom : 0으로 설정하는 것입니다. 이는 바닥 글을 상대적인 첫 번째 부모 / 조부모의 맨 아래로 이동합니다 (body ofcourse).

이제 우리는 여전히 전체 페이지를 채울 때 내용이 바닥 글 아래로 이동하도록 수정해야 할 한 가지 문제가 있습니다. 왜? 바닥 글은 더 이상 "html flow"안에 없기 때문에 절대적이기 때문입니다. 어떻게이 문제를 해결합니까? 우리는 몸에 패딩 바닥을 추가 할 것입니다. 그러면 본문이 실제로 내용보다 커집니다.

나는 당신들에게 많은 것을 분명히하기를 바랍니다.

— 데이비드
소스

1

jQuery를 사용한 동적 원 라이너

내가 본 모든 CSS 메소드는 너무 엄격합니다. 또한 바닥 글 fixed이 디자인의 일부가 아닌 경우 바닥 글을 설정하는 것은 옵션이 아닙니다.

에 테스트 :

크롬 : 60
FF : 54
IE : 11

이 레이아웃을 가정 :

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

다음 jQuery 함수를 사용하십시오.

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

그 기능은 min-heightfor #content를 창 높이 - 바닥 글의 높이로 설정합니다 .

우리가 사용하기 때문에 min-height경우에, #content높이가 초과 창 높이를 , 기능이 정상적으로 저하와 필요하지 않은 이후되지 않은 효과 아무것도 않습니다.

실제로보기 :

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

스 니펫 확장

동일한 스 니펫 JsFiddle의

보너스:

더 나아가서이 함수를 다음과 같이 동적 뷰어 높이 크기에 맞게 조정할 수 있습니다.

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

스 니펫 확장

— 나는 코데
소스

1

당신은 이것을 할 수 있습니다

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

— 압달라 압 딜라
소스

0

바닥 글을 제외한 html, body 및 기타 행을 100 %로 설정하십시오. 예 :

<body>
<header></header>
<content></content>
<footer></footer>

CSS는

html, body, header, content{
height:100%;
}

— 올라 툰데 G.
소스

0

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

— 산자이시
소스

0

어때요?

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

— 노베 센토 노브
소스

이 코드는 질문에 대답 할 수 있지만,이 코드가 질문에 응답하는 이유 및 / 또는 방법에 대한 추가 컨텍스트를 제공하면 장기적인 가치가 향상됩니다.

— β.εηοιτ.βε

-1

나는 많은 프로젝트에서 사용했으며 결코 단일 문제를 얻지 못했습니다. :)

참고로 코드는 스 니펫에 있습니다.

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

스 니펫 확장

— 산토스 칼세
소스

HTML 페이지 바닥 글을 최소 높이로 페이지 하단에 유지하지만 페이지와 겹치지 않도록하는 CSS

데모보기

Flexbox 방법 :

position:absolute 방법 : (동적 바닥 글 높이를 허용하지 않음)

테이블 레이아웃 방법 :

CSS

HTML

jQuery를 사용한 동적 원 라이너

보너스:

`position:absolute` 방법 : (동적 바닥 글 높이를 허용하지 않음)