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

Program / 글쓴이

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

바닥 글을 원합니다

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

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

답변

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

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

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

답변

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

데모보기

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>

스 니펫 확장

답변

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

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>

스 니펫 확장

답변

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

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자체 여백과 패딩이 포함되어 있기 때문에 그 값을 조정해야했습니다.

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

답변

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

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

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

답변

내가 사용하는 간단한 솔루션은 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>

답변

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

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페이지 하단에 렌더링됩니다.