웹 페이지 하단에 바닥글을 유지하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com/questions/42294

문제

마크업의 오른쪽 및 왼쪽 div를 모두 지우는 바닥글이 있는 간단한 2열 레이아웃이 있습니다.내 문제는 모든 브라우저에서 바닥글을 페이지 하단에 유지할 수 없다는 것입니다.콘텐츠가 바닥글을 아래로 밀어내면 작동하지만 항상 그런 것은 아닙니다.

업데이트:

Firefox에서는 제대로 작동하지 않습니다.바닥글을 브라우저 창 아래쪽까지 밀어넣을 만큼 페이지의 콘텐츠가 충분하지 않은 경우 바닥글 아래에 배경색 스트립이 표시됩니다.불행하게도 이것이 페이지의 기본 상태입니다.

도움이 되었습니까?

해결책

고정 바닥글을 얻으려면:

  1. 가지고있다 <div> ~와 함께 class="wrapper" 귀하의 콘텐츠를 위해.

  2. 오른쪽 ~ 전에 폐막 </div> ~의 wrapper 두는<div class="push"></div>.

  3. 오른쪽 ~ 후에 폐막 </div> ~의 wrapper 두는<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

다른 팁

CSS vh 단위를 사용하세요!

아마도 끈끈한 바닥글을 처리하는 가장 분명하고 해킹되지 않은 방법은 새로운 CSS 뷰포트 단위.

다음과 같은 간단한 마크업을 예로 들어 보겠습니다.

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

머리글 높이가 80px이고 바닥글 높이가 40px인 경우 고정 바닥글을 만들 수 있습니다. 하나의 규칙으로 콘텐츠 div에서:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

이는 다음을 의미합니다.콘텐츠 div의 높이를 적어도 뷰포트 높이의 100%에서 머리글과 바닥글의 높이를 합친 값입니다.

그게 다야.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...다음은 동일한 코드가 콘텐츠 div의 많은 콘텐츠에서 작동하는 방식입니다.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

참고:

1) 머리글과 바닥글의 높이를 알아야 합니다.

2) 이전 버전의 IE(IE8-) 및 Android(4.4-)는 뷰포트 단위를 지원하지 않습니다.(사용해도 되나요)

3) 옛날 옛적에 웹킷은 계산 규칙 내의 뷰포트 단위에 문제가 있었습니다.이 문제는 실제로 수정되었습니다(여기를 보아라) 그럼 문제가 없군요.그러나 어떤 이유로 calc를 사용하지 않으려는 경우 음수 여백과 상자 크기 조정을 사용하여 문제를 해결할 수 있습니다.

다음과 같습니다:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

고정 바닥글 display: flex

다음에서 영감을 받은 솔루션 Philip Walton의 끈끈한 바닥글.

설명

이 솔루션은 에만 유효:

  • 크롬 ≥ 21.0
  • 파이어폭스 ≥ 20.0
  • 인터넷 익스플로러 ≥ 10
  • 사파리 ≥ 6.1

이는 다음을 기반으로 합니다. flex 표시하다, 활용 flex-grow 요소가 다음을 수행할 수 있도록 하는 속성 자라다 어느 쪽이든 키 또는 너비 (때 flow-direction 다음 중 하나로 설정됩니다. column 또는 row 각각), 컨테이너의 추가 공간을 차지합니다.

우리는 또한 vh 단위, 어디서 1vh ~이다 ~로써 정의 된:

뷰포트 높이의 1/100

그러므로 높이는 100vh 이는 요소가 전체 뷰포트 높이에 걸쳐 있도록 지시하는 간결한 방법입니다.

웹페이지를 구성하는 방법은 다음과 같습니다.

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

바닥글을 페이지 하단에 고정하려면 페이지 하단의 바닥글을 밀어내는 데 필요한 만큼 본문과 바닥글 사이의 공간을 늘려야 합니다.

따라서 우리의 레이아웃은 다음과 같습니다:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

구현

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

당신은 그것을 가지고 놀 수 있습니다 JSFiddle.

사파리의 특이한 점

Safari에는 구현에 결함이 있음 flex-shrink 재산, 콘텐츠를 표시하는 데 필요한 최소 높이보다 항목을 줄일 수 있습니다.이 문제를 해결하려면 다음을 설정해야 합니다. flex-shrink 속성을 명시적으로 0에서 .content 그리고 footer 위의 예에서:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

당신은 사용할 수 있습니다 position: absolute 페이지 하단에 바닥글을 넣으려면 다음과 같이 하세요. 그런 다음 2개의 열에 적절한 항목이 있는지 확인하세요. margin-bottom 바닥글에 의해 가려지지 않도록 합니다.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

다음은 매력처럼 작동하는 jQuery를 사용한 솔루션입니다.창 높이가 몸체 높이보다 큰지 확인합니다.그렇다면 보상을 위해 바닥글의 여백 상단을 변경합니다.Firefox, Chrome, Safari 및 Opera에서 테스트되었습니다.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

바닥글에 이미 여백 상단(예: 50픽셀)이 있는 경우 다음과 같이 마지막 부분을 변경해야 합니다.

css( 'margin-top', height_diff + 50 )

CSS를 설정합니다. #footer 에게:

position: absolute;
bottom: 0;

그런 다음 padding 또는 margin 너의 바닥까지 #sidebar 그리고 #content 높이에 맞게 #footer 또는 겹치는 경우 #footer 그들을 덮을 것입니다.

또한 내 기억이 맞다면 IE6에는 다음과 같은 문제가 있습니다. bottom: 0 CSS.IE6용 JS 솔루션을 사용해야 할 수도 있습니다(IE6에 관심이 있는 경우).

유사한 솔루션 @gcedo 바닥글을 아래로 내리기 위해 중간 콘텐츠를 추가할 필요가 없습니다.우리는 간단히 추가할 수 있습니다 margin-top:auto 바닥글에 추가하면 높이나 위 콘텐츠의 높이에 관계없이 페이지 하단으로 푸시됩니다.

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

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

다음 단계에 따라 절대 위치 지정 및 Z-색인을 사용하여 모든 해상도에서 고정 바닥글 div를 만듭니다.

  • 다음을 사용하여 바닥글 div를 만듭니다. position: absolute; bottom: 0; 그리고 원하는 높이
  • 콘텐츠 하단과 창 하단 사이에 공백을 추가하도록 바닥글의 패딩을 설정합니다.
  • 컨테이너 만들기 div 본문 내용을 다음과 같이 감싸는 것입니다. position: relative; min-height: 100%;
  • 기본 콘텐츠에 하단 패딩 추가 div 이는 높이에 바닥글의 패딩을 더한 값과 같습니다.
  • 설정 z-index 컨테이너보다 바닥글이 더 큼 div 바닥글이 잘린 경우

예는 다음과 같습니다.

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

콘텐츠와 사이드바 주위에 컨테이너 div(overflow:auto 포함)를 배치해 보세요.

그래도 문제가 해결되지 않으면 바닥글이 제대로 표시되지 않는 스크린샷이나 예시 링크가 있나요?

한 가지 해결책은 상자의 최소 높이를 설정하는 것입니다.아쉽게도 그런 것 같다 IE에서는 제대로 지원되지 않습니다. (놀라다).

이러한 순수 CSS 솔루션 중 어느 것도 동적으로 크기를 조정하는 콘텐츠(적어도 Firefox 및 Safari에서는)에서 제대로 작동하지 않습니다. 예를 들어 컨테이너 div에 배경이 설정된 경우 페이지를 선택한 다음 div 내의 테이블 크기를 조정(몇 행 추가)하면 테이블은 스타일이 지정된 영역의 아래쪽에서 튀어나올 수 있습니다. 즉, 글꼴 색상과 배경색이 모두 흰색이므로 테이블의 절반은 검은색 테마에 흰색으로, 테이블의 절반은 완전한 흰색으로 지정할 수 있습니다.테마롤러 페이지에서는 기본적으로 수정이 불가능합니다.

중첩된 div 다중 열 레이아웃은 보기 흉한 해킹이며 바닥글을 고정하기 위한 100% 최소 높이 본문/컨테이너 div는 더 보기 흉한 해킹입니다.

내가 시도한 모든 브라우저에서 작동하는 유일한 비스크립트 솔루션은 다음과 같습니다.thead(머리글용)/tfoot(바닥글용)/tbody(임의의 열 수에 대한 td) 및 100% 높이가 있는 훨씬 간단하고 짧은 테이블입니다.그러나 이는 의미론적 및 SEO 단점을 인식했습니다(tfoot은 tbody보다 먼저 나타나야 합니다.ARIA 역할은 괜찮은 검색 엔진에 도움이 될 수 있습니다).

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

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

페이지 하단에 정렬된 반응형 바닥글을 찾고 있는 경우 이 방법을 사용하면 됩니다. 이 바닥글은 항상 뷰포트 높이의 80% 상단 여백을 유지합니다.

이 질문에 대해 제가 본 많은 답변은 투박하고 구현하기 어렵고 비효율적이었습니다. 그래서 저는 한 번 시도해 보고 아주 작은 CSS와 HTML로 구성된 나만의 솔루션을 생각해내야겠다고 생각했습니다.

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

이것은 바닥글의 높이를 설정한 다음 CSS 계산을 사용하여 바닥글이 여전히 바닥에 있을 때 페이지의 최소 높이를 계산하는 방식으로 작동합니다. 이것이 일부 사람들에게 도움이 되기를 바랍니다 :)

나는 때때로 이 문제로 어려움을 겪었고 항상 모든 div가 서로 안에 있는 솔루션이 지저분한 솔루션이라는 것을 알았습니다.나는 그것을 조금 어지럽혔고 개인적으로 이것이 효과가 있다는 것을 알았으며 확실히 가장 간단한 방법 중 하나입니다.

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

여기서 마음에 드는 점은 추가 HTML을 적용할 필요가 없다는 것입니다.이 CSS를 추가한 다음 언제든지 HTML을 작성할 수 있습니다.

여러 사람이 이 간단한 문제에 대한 답을 여기에 올렸지만, 내가 뭘 잘못하고 있는지 알아내기 전까지 얼마나 답답했는지 생각하면 한 가지 추가할 것이 있습니다.

언급했듯이 가장 간단한 방법은 다음과 같습니다.

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

그러나 게시물에 언급되지 않은 속성은 아마도 일반적으로 기본값이기 때문일 것입니다. 위치:공전 body 태그에위치 친척이 작동하지 않습니다!

내 워드프레스 테마는 기본 본문 표시를 무시했고 이로 인해 불쾌할 정도로 오랫동안 나를 혼란스럽게 했습니다.

내가 알고 있는 오래된 스레드이지만 반응형 솔루션을 찾고 있다면 다음 jQuery 추가가 도움이 될 것입니다. 

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

전체 가이드는 여기에서 찾을 수 있습니다: https://pixeldesigns.co.uk/blog/반응성-jquery-sticky-footer/

아주 간단한 라이브러리를 만들었습니다. https://github.com/ravinderpayal/FooterJS

사용법은 매우 간단합니다.라이브러리를 포함한 후 이 코드 줄을 호출하면 됩니다. 

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

다른 매개변수/ID로 위의 기능을 호출하여 바닥글을 동적으로 변경할 수 있습니다. 

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

참고:- CSS를 변경하거나 추가할 필요가 없습니다.라이브러리는 동적이므로 페이지를 로드한 후 화면 크기가 조정되더라도 바닥글 위치가 재설정됩니다.CSS가 잠시 동안 문제를 해결했지만 데스크톱에서 태블릿으로 또는 그 반대로 디스플레이 크기가 크게 변경되면 콘텐츠가 겹치거나 더 이상 고정되지 않기 때문에 이 라이브러리를 만들었습니다.

또 다른 솔루션은 CSS 미디어 쿼리입니다. 하지만 이 라이브러리가 자동으로 작업을 수행하고 모든 기본 JavaScript 지원 브라우저에서 지원되는 동안 다양한 크기의 화면에 대해 다양한 CSS 스타일을 수동으로 작성해야 합니다.

편집하다CSS 솔루션:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

이제 디스플레이 높이가 콘텐츠 길이보다 크면 바닥글을 아래쪽에 고정하고 그렇지 않은 경우 스크롤해야 보기 때문에 디스플레이 맨 끝에 자동으로 나타납니다.

그리고 JavaScript/라이브러리 솔루션보다 더 나은 솔루션인 것 같습니다.

이전에는 이 페이지에서 제안한 솔루션으로는 운이 없었으나 마침내 이 작은 트릭이 작동했습니다.또 다른 가능한 솔루션으로 포함하겠습니다.

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

Flexbox 솔루션

자연스러운 머리글 및 바닥글 높이에는 Flex 레이아웃이 선호됩니다.이 flex 솔루션은 최신 브라우저에서 테스트되었으며 실제로 IE11에서 작동합니다.

JS 바이올린을 참조하세요..

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

나에게 있어 바닥글을 표시하는 가장 좋은 방법은 바닥에 붙어 있지만 항상 내용을 가리지 않는 것입니다.

#my_footer {
    position: static
    fixed; bottom: 0
}

jQuery 크로스 브라우저 사용자 정의 플러그인 - $.footerBottom()

아니면 저처럼 jQuery를 사용하고 바닥글 높이를 auto 또는 fix, 원하는 것이 무엇이든 어쨌든 작동합니다.이 플러그인은 jQuery 선택기를 사용하므로 작동하려면 파일에 jQuery 라이브러리를 포함해야 합니다.

플러그인을 실행하는 방법은 다음과 같습니다.jQuery를 가져오고, 이 사용자 정의 jQuery 플러그인의 코드를 복사하고 jQuery를 가져온 후 가져옵니다!매우 간단하고 기본적이지만 중요합니다.

그렇게 할 때 해야 할 일은 다음 코드를 실행하는 것뿐입니다.

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

문서 준비 이벤트 안에 배치할 필요가 없습니다.그대로 잘 실행될 것입니다.페이지가 로드될 때와 창 크기가 조정될 때 바닥글의 위치를 ​​다시 계산합니다.

여기 당신이 이해할 필요가 없는 플러그인의 코드가 있습니다.구현 방법만 알아두세요.그것은 당신을 위해 일을 합니다.그러나 그것이 어떻게 작동하는지 알고 싶다면 코드를 살펴보십시오.나는 당신을 위해 의견을 남겼습니다.

//import jQuery library before this script


// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Flex 솔루션은 바닥글을 끈적하게 만드는 한 나에게 효과적이었지만 불행하게도 Flex 레이아웃을 사용하도록 본문을 변경하면 일부 페이지 레이아웃이 변경되었으나 더 나은 결과는 아니었습니다.마침내 나에게 효과가 있었던 것은 다음과 같습니다.

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

나는 ctf0의 응답에서 이것을 얻었습니다. https://css-tricks.com/couple-takes-sticky-footer/

이후 그리드 해결책은 아직 제시되지 않았습니다. 여기에는 두 가지만 있습니다. 선언 위해 상위 요소, 우리가 height: 100% 그리고 margin: 0 당연하게도:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

품목은 교차 축을 따라 정렬 컨테이너 내에 골고루 분포됩니다.인접한 항목의 각 쌍 사이의 간격은 동일합니다.첫 번째 항목은 메인 스타트 가장자리와 플러시되며 마지막 항목은 메인 엔드와 플러시됩니다.

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top