바닥 글을 웹 페이지의 맨 아래에 유지하려면 어떻게합니까?


291

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


@Jimmy에 추가하겠습니다. 바닥 글이 포함 된 요소에 절대 (또는 상대) 위치를 선언해야합니다. 귀하의 경우 본문 요소입니다. 편집 : 난 당신의 페이지에서 방화범과 그것을 테스트하고 그것은 잘 작동하는 것 같았다 ...
yoavf

html로 페이지 - 투 - 전체 높이 링크 등을 스트레칭 요 요구 될 수있다 말한다 : makandracards.com/makandra/...
시나

답변:


199

끈적 거리는 바닥 글을 얻으려면 :

  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 */
}

4
@ jlp : height : 100 % 문에 양식 태그를 추가해야합니다. 그렇지 않으면 스티커 바닥 글이 손상됩니다. html, body, form {height : 100 %;}
dazbradbury

바닥 글 나사에 패딩을 추가하는 것을 보았지만 바닥 글의 여분의 패딩을 {footer, push} 높이에서 빼서 고정 할 수 있음을 알아 냈습니다.
nicooga

1
데모에 대한 자세한 설명은이 사이트에서 제공됩니다 : CSS Sticky Footer
mohitp

이봐, 난 당신의 단계를 따라 큰 페이지에 아주 잘 작동합니다. 그러나 사용자가 바닥 글을 아래로 스크롤 할 수없는 작은 페이지에서는 바닥에서 약간 아래쪽에 있습니다. 따라서 거의 빈 페이지를 스크롤 가능하게 만듭니다. 누구나이 문제를 해결하는 방법을 알고 있습니까? 여기서 내 테스트 페이지를 볼 수 있습니다. sheltered-escarpment-6887.herokuapp.com
Syk

1
@Syk 나는 최소 높이를 줄이는 것이 도움이된다는 것을 알았습니다. 94 %는 확인 값입니다,하지만 당신은 여전히 확실하지 진정한 해결책이 여기에있다 :( 모바일에 문제를 참조하십시오.
ACK_stoverflow

84

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 % 이상 에서 머리글과 바닥 글의 결합 된 높이를 뺀 값으로 설정하십시오.

그게 다야.

... 그리고 같은 코드가 content div의 많은 콘텐츠에서 작동하는 방식은 다음과 같습니다.

NB :

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

2) 이전 버전의 IE (IE8-) 및 Android (4.4-)는 뷰포트 단위를 지원하지 않습니다. ( 캐니 우스 )

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

이렇게 :


4
이것은 내가 본 최고의 솔루션이며, 이상한 경우에도 .content의 일부 내용이 who-knows-what-eason을 위해 바닥 글에 넘겨 져서 작동했습니다. 그리고 Sass 및 변수와 같은 sth를 사용하면 더 유연 할 수 있다고 생각합니다.
themarketka

1
실제로, 이것은 매력처럼 작동합니다. 지원되지 않는 브라우저에서도 쉽게 대체 할 수 있습니다.
Aramir

3
절대 측정에 대한 혼란은 여전히 ​​해킹되지 않습니까? 기껏해야 해킹적일 것입니다.
Jonathan

그러나 바닥 글과 머리글의 높이가 px가 아닌 백분율로 측정된다면? 페이지 높이의 15 %처럼?
Fernanda Brum Lousada

3
스크롤 위치에 따라 주소 표시 줄을 숨기거나 표시하는 모바일 브라우저에서 뷰포트 단위가 항상 올바르게 작동하는 것은 아닙니다.
Evgeny

57

스티커 바닥 글 display: flex

Philip Walton의 스티커 바닥 글에서 영감을받은 솔루션 입니다.

설명

이 솔루션은 다음에 대해서만 유효합니다 .

  • 크롬 ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 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; }

13
바닥 글의 높이를 알 수없는 경우에도 실제로 작동하는 유일한 접근 방법이므로 이것이 정답이라고 생각합니다.
fstanis

이것은 깔끔한 2
Halfacht

그러나 왜 필립 월튼의 솔루션 자체가 아닌가? 왜 여분의 "스페이서"요소인가?
YakovL

@YakovL Walton의 솔루션 .Site-content요소 는와 같은 역할을 spacer합니다. 방금 다르게 부릅니다.
Gherman

@Gherman 잘, 이 마크 업에 .Site-content아날로그 .content가 있습니다 .. 그러나 결코, gcedo가 그것에 대해 어떤 특별한 생각을 가지고 있다고 추측 할 필요가 없습니다
YakovL

30

position: absolute다음을 사용 하여 바닥 글을 페이지 하단에 놓을 수 있지만 두 열이 margin-bottom바닥 글에 의해 가려지지 않도록 적절한 지 확인하십시오 .

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

비슷한 설정 (2 열 + 바닥 글)으로 시도했지만 작동하지 않습니다.
동 형사상

14
내용이 커지면 내용과 겹칩니다.
Satya Prakash

1
콘텐츠에 여백이있는 이유가 여기에 있습니다. 바닥 글을 고정 높이로 설정해야합니다.
Jimmy

가치있는 것에 대해, 무언가가 0의 값이라면 그것이 어떤 측정 단위에 있는지는 중요하지 않습니다. 아무것도 없습니다. 그래서 0px내가 본 모든 스타일 시트의 모든 것은 그냥 있어야합니다 0.
Jonathan

페이지 높이가 디스플레이의 높이보다 높거나 바닥 글의 내용 길이가 동적이면 어떻게됩니까? 이 문제의 해결책에 대한 내 대답을보십시오.
Ravinder Payal

15

다음은 매력처럼 작동하는 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 )

한 가지 대안은 바닥 글 바로 앞에 "푸셔"div를 추가하는 것입니다. 그런 다음 푸셔 div의 높이를 설정하십시오. 이를 통해 기존 마진을 처리 할 필요가 없습니다
Sarsaparilla

JS가없는 솔루션에 대한 내 대답을 참조하십시오.
ferit

11

의 CSS를 다음 #footer과 같이 설정하십시오 .

position: absolute;
bottom: 0;

그런 다음을 추가해야합니다 padding또는 margin당신의 하단에 #sidebar#content의 높이에 맞게 #footer또는 때 중복는이 #footer를 다룰 것입니다.

또한 올바르게 기억하면 IE6에 bottom: 0CSS에 문제가 있습니다. IE6에 대해 JS 솔루션을 사용해야 할 수도 있습니다 (IE6에 관심이있는 경우).


10
창이 너무 작 으면 바닥 글이이 CSS의 컨텐츠 앞에 표시됩니다.
세이치

1
내 답변보기 @Seichi
ferit

6

@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>


1
또 다른 접근 방식은 .content flex: 1 0 auto;확장 가능하고 비 싱크 가능하게 만드는 것이지만 margin-top: auto;"비 관련" .content이 아닌 스타일링 바닥 글을 포함하는 멋진 트릭입니다 . 실제로,이 접근법에서 왜 플렉스가 필요한지 궁금합니다.
YakovL

@ YakovL 예 여기에 주요 아이디어는 마진 최고 트릭입니다.) 나는 이와 같은 내용을 만들 수 있다는 것을 알고 있지만 아이디어가 내용에 의해 바닥 글을 밀어 넣는 이전 답변과 거의 동일합니다 ... 그리고 나는 이것을 피하고 바닥 글을 여백 만 밀어
붙이고 싶었다

@YakovL flex는 margin : auto에 필요합니다 :) 우리는 그것 없이는 사용할 수 없습니다 ... margin : auto는 flex 항목과 약간 다르게 동작 한 다음 항목을 차단합니다. display:flex그것을 제거 하면 작동하지 않습니다, 당신은 정상적인 블록 요소 흐름이있을 것입니다
Temani Afif

그래, 그것 없이는 작동하지 않는 것을 볼 수 있지만 왜 ( "약간 다른"가 무엇인지) 이해하지 못합니다
YakovL

1
@YakovL 간단합니다. 일반 블록 요소를 사용하면 흐름이 항상 행 방향이므로 자동으로 사용되는 오른쪽 / 왼쪽 여백 만 작동합니다 ( margin:0 auto중앙 블록 요소로 유명 ) 그러나 열 방향이 없으므로 여백이 없습니다. 위 / 아래로 자동. Flexbox에는 행 / 열 방향이 있습니다.;). 이것은 약간의 차이이지만, 마진은 요소를 정렬하기 위해 flexbox에서도 사용되므로 행 방향에서도 margin-top / bottom auto를 사용하여 수직으로 정렬 할 수 있습니다. 자세한 내용은 다음을 참조하십시오. w3.org/TR/css- flexbox-1 / # auto-margins
Temani Afif

5

여기에 이미지 설명을 입력하십시오

index.html :

<!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>

main.css :

#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 */
}

출처 : https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/


2

나는 때때로 이것으로 어려움을 겪었고 항상 서로의 모든 div가있는 솔루션이 지저분한 솔루션이라는 것을 알았습니다. 방금 조금 엉망으로 만들었으며 개인적으로 이것이 효과가 있으며 가장 간단한 방법 중 하나라는 것을 알았습니다.

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

내가 좋아하는 것은 추가 HTML을 적용 할 필요가 없다는 것입니다. 이 CSS를 추가 한 다음 언제든지 HTML을 작성할 수 있습니다.


이것은 저에게 효과적이지만 바닥 글에 너비 : 100 %를 추가했습니다.
Victor. Uduak

2

이후 그리드 솔루션은 아직 발표되지 않은, 여기 그냥 두 사람과 함께입니다 선언 에 대한 부모 요소 우리가 가지고가는 경우에, 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>

품목은 정렬 용기 내에서 횡축을 따라 균등하게 분배됩니다. 인접한 항목의 각 쌍 사이의 간격은 동일합니다. 첫 번째 항목은 기본 시작 가장자리와 같고 마지막 항목은 기본 끝 가장자리와 동일합니다.


1

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 %의 상단 여백을 유지해야합니다.


1

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

  • position: absolute; bottom: 0;원하는 높이 로 바닥 글 div를 만듭니다.
  • 바닥 글의 안쪽 여백을 설정하여 내용 아래쪽과 창 아래쪽 사이에 공백을 추가합니다.
  • 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>


1

이 질문에 대해 내가 본 많은 답변은 어색하고 구현하기가 어렵고 비효율적이므로 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 calc를 사용하여 바닥 글이 여전히 맨 아래에있을 수있는 페이지의 최소 높이를 계산하여 일부 사람들에게 도움이되기를 바랍니다.)



0

이러한 순수한 CSS 솔루션 중 어느 것도 동적으로 크기를 조정하는 콘텐츠 (적어도 firefox 및 Safari에서)와 제대로 작동하지 않습니다. 표는 스타일이 지정된 영역의 아래쪽에서 튀어 나올 수 있습니다. 즉, 글꼴 색상과 배경색이 모두 흰색이기 때문에 표의 절반은 검은 색 테마로 흰색으로, 표의 절반은 흰색으로 표시 할 수 있습니다. 테마 롤러 페이지에서는 기본적으로 수정할 수 없습니다.

중첩 된 div 다중 열 레이아웃은 못생긴 해킹이며 바닥 글을 고치기위한 100 % 최소 높이 바디 / 컨테이너 div는 못생긴 해킹입니다.

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


0

여러 사람들이이 간단한 문제에 대한 해답을 여기에 올렸지 만, 내가 잘못하고있는 것을 알아낼 때까지 얼마나 실망했는지를 고려할 때 한 가지 더 덧붙일 것이 있습니다.

가장 간단한 방법은 다음과 같습니다 ..

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 태그 입니다. 상대 위치가 작동하지 않습니다!

내 워드 프레스 테마가 기본 본문 표시를 재정의했으며 오랫동안 놀랍게도 나를 혼란스럽게했습니다.


0

내가 알고있는 오래된 스레드이지만 반응 형 솔루션을 찾고 있다면이 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/responsive-jquery-sticky-footer/ 에서 찾을 수 있습니다.


0

나는 매우 간단한 라이브러리를 만들었습니다 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 / library보다 더 나은 솔루션 인 것 같습니다.


0

나는이 페이지에서 제안 된 솔루션으로 운이 없었지만 마지막 으로이 작은 트릭이 효과가있었습니다. 다른 가능한 솔루션으로 포함하겠습니다.

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

0

Flexbox 솔루션

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

JS Fiddle 참조 .

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;
}

0

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

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

1
이 구문이 맞습니까? 위치는 정적인가 아니면 고정적인가?
stealththeninja

0

jQuery CROSS BROWSER CUSTOM PLUGIN-$ .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>


바닐라 자바 ​​스크립트는 플러그인보다 길이가 짧습니다.
Ravinder Payal

0

플렉스 솔루션은 바닥 글을 끈적 끈적하게 만드는 데 도움이되었지만 불행히도 플렉스 레이아웃을 사용하도록 본문을 변경하면 일부 페이지 레이아웃이 변경되었지만 더 나은 것은 아닙니다. 마침내 나를 위해 일한 것은 다음과 같습니다.

    jQuery(document).ready(function() {

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

});

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


0

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>


0

고정 된 위치를 사용하지 않고 모바일에서 귀찮게 따라 가면 지금까지 효과가있는 것 같습니다.

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

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

html을 min-height: 100%;and로 설정 position: relative;한 다음 position: absolute; bottom: 0; left: 0;바닥 글에 설정하십시오 . 그런 다음 바닥 글이 본문의 마지막 요소인지 확인했습니다.

이것이 다른 사람에게 효과가 없는지, 왜 그런지 알려주십시오. 이 지루한 스타일의 핵은 내가 생각하지 못한 다양한 상황에서 이상하게 행동 할 수 있다는 것을 알고 있습니다.


-1

내용과 사이드 바 주위에 컨테이너 div (오버플로 : 자동)를 넣으십시오.

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.