페이지 하단 또는 콘텐츠 중 낮은 쪽의 바닥 글

94

다음과 같은 구조가 있습니다.

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

<article>JavaScript를 사용하여 콘텐츠를 동적으로로드합니다 . 이로 인해 <article>블록 의 높이가 변경 될 수 있습니다.

<footer>콘텐츠가 많을 때는 페이지 하단에, 콘텐츠가 몇 줄만있는 경우에는 브라우저 창 하단에 블록을 배치 하고 싶습니다 .

지금은 둘 중 하나만 할 수 있지만 둘 다 할 수는 없습니다.

그래서 누구든지 내가 이것을 할 수있는 방법을 알고 있는가?- <footer>페이지 / 콘텐츠의 하단이나 화면의 하단에 붙이는 것이 더 낮다.

css  html  footer 
— 의지
소스
사람들이 2 년 된 질문에 반대표를 던진 이유에 대해 언급할까요?
— 윌
어서, 거의 6 년이
— Will

답변:

101

Ryan Fait의 끈적한 바닥 글 은 매우 좋지만 기본 구조가 부족하다고 생각합니다 *.

Flexbox 버전

당신은 오래된 브라우저를 지원하지 않고 인 flexbox를 사용할 수있는 운이 충분히 있다면, 끈적 끈적한 바닥 글은 하찮게 쉽게되어, 및 동적 크기의 바닥 글을 지원합니다.

flexbox를 사용하여 바닥 글을 맨 아래에 고정하는 비결은 동일한 컨테이너의 다른 요소를 수직으로 구부리는 것입니다. 필요한 것은 전체 높이 래퍼 요소와 다음 보다 큰 값을 display: flex가진 적어도 하나의 형제 요소입니다 .flex0

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

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

article {
  flex: 1;
}

Show code snippet

If you can't use flexbox, my base structure of choice is:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Which isn't all that far off from:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.

HTML: 
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
CSS: 
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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

Show code snippet

With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.

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

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

Show code snippet

Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.

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

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

Show code snippet

And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.

* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.

— zzzzBov
소스
I needed to add #main-wrapper *:first-child { margin-top: 0; }, otherwise the page would be too long by the first child's top margin (causing an unnecessary scrollbar on short pages).
— Florian Brucker
Thank you, @zzzzBov for this thorough explanation, and especially for mentioning flex-direction (wish I'd found this sooner - would have saved me a couple of hours! :)
— ea0723
The Flexbox version isn't working for me in IE11, but the other approach is fine for me! Thanks and +1!
— Matt
@Matt, you need to use browser prefixes to get flexbox to work in IE11. use a tool like autoprefixer and you'll never need to worry about adding them manually.
— zzzzBov
2
The sticky footer link appears to be broken due to his site being converted to an In Memoriam notice for him. In addition, there are no cached versions due to the settings of robots.txt
— tzrlk
13

Ryan Fait's sticky footer is a simple solution that I have used several times in the past.

Basic HTML:

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS:

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Translating this to be similar to what you already have results with something along these lines:

HTML:

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

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

Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!

— Josh Mein
소스
4
I love the way he put the comment at the bottom, appropriate for a footer solution :D
— Madara's Ghost
There's no need to change the markup for this particular style.
— zzzzBov
@zzzzBov I do not have much time to look into this further right now, but what exactly do you mean?
— Josh Mein
I'm on my mobile ATM so I can't write a full answer otherwise I'd have done that already. The comment was more so I'd remember to add an answer later.
— zzzzBov
@JoshMein, I've added an answer that explains how to make the footer stick without messing with the provided structure.
— zzzzBov
0

I was looking to solve this problem without adding any additional markup, so I ended up using the following solution: 

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>
Expand snippet

You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.

You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/

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