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

Program / 글쓴이

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

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

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

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

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

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

답변

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.

답변

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!

답변

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/

답변