트위터 부트 스트랩 3 스티커 바닥 글

204

나는 트위터 부트 스트랩 프레임 워크를 꽤 오랫동안 사용 해 왔으며 최근에 버전 3으로 업데이트되었습니다!

스티커 바닥 글을 바닥에 고정시키는 데 문제가 있습니다. Twitter 부트 스트랩 웹 사이트에서 제공하는 스타터 템플릿을 사용했지만 여전히 운이 없으며 아이디어가 있습니까?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— 브래드 플레처
소스
31
— ptim
3
@memeLab 왜 공식 예제에 body margin-bottom : -60px에 대한 내용이 없습니까? 아니면 내가 그리워 ...?
— ganders
sticky footer에 가변 높이를 허용 하는 CSS 전용 솔루션을 추가했습니다 . 여기에 링크하여 새 답변이므로 페이지 하단에 있습니다.
— tao

답변:

193

navbar-fixed-bottom 클래스를 바닥 글에 추가하십시오.

<div class="footer navbar-fixed-bottom">
— 존
소스
32
이 끈적 바닥 글과 동일하지 않습니다
— 유라 오멜 척
3
머리글과 바닥 글이있는 경우 모바일 장치의 공간이 너무 느슨합니다.
— strattonn
4
@strattonn 그것이 미디어 쿼리를위한 것입니다
— Jacob Raccuia
20
페이지에 스크롤이 필요하지 않으면 완벽하게 작동합니다. 그러나 바닥 글은 페이지의 더 많은 내용과 겹칩니다. 이에 대한 해결 방법이 있습니까? 감사!
— Xplora
1
겹침 문제는 확실하지 않지만 여백 / 패딩을 추가해도 문제가 해결되지 않습니까?
— Jon
152

공식 Boostrap3 sticky footer 예제를 참조하면 추가 할 필요가 없으며 <div id="push"></div>CSS가 더 간단합니다.

공식 예제에서 사용 된 CSS는 다음과 같습니다.

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

필수 HTML :

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

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

      </div>
    </div>
</body>

sticky-footer 예제 의 소스 코드 에서이 CSS에 대한 링크를 찾을 수 있습니다 .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

전체 URL : http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

— tkymtk
소스
21
공식 sticky-footer 예제의 HTML 및 CSS는 이제 더 이상 'wrap'div를 사용하지 않는 여기에 설명 된 것과 상당히 다릅니다.
— IanB
52

다음은 이미 부트 스트랩에있는 것 이외의 추가 CSS 또는 Javascript가 필요하지 않고 현재 바닥 글을 방해하지 않는 고정 바닥 글을 추가하는 방법입니다.

예를 들면 다음과 같습니다. 이지 스티커 바닥 글

이것을 복사하여 코드에 직접 붙여 넣으십시오. 번거 로움이 없습니다.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— 산후
소스
4
아주 좋고 빠릅니다. 반응이 좋습니다. 그러나 바닥 글에 의해 숨겨지지 않도록 페이지 내용의 맨 아래에 약간의 공간을 추가해야합니다. 공간의 높이는 바닥 글 높이와 같아야합니다. 최선을 다하는 방법을 보여줄 수 있습니까? BTW "CSS 가 필요하지 않습니다" 는 기술적으로 잘못되었습니다. "부트 스트랩 클래스 이외의 추가 CSS가 필요하지 않습니다" 여야합니다 .
— ADTC
1
나는 이것이 부트 스트랩에 존재하는 것을 활용한다는 것을 좋아합니다. 나는 다른 최고 답변을 얻지 못했지만 이것을 내 페이지와 bam, sticky footer에 붙여 넣습니다. 감사!
— haakon.io
34

방금 추가 한 CSS 외에도 랩 div를 닫기 전에 push div 를 추가해야합니다.

HTML의 기본 구조는 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

라이브 뷰
편집 뷰

— 데이비드 타이 아로아
소스
페이지 내용이 사용 가능한 디스플레이보다 크면 바닥 글이 아래로 내려갑니다. 바닥 글이 바닥에 고정되도록 (예 : navbar-fixed-bottom)
— blueFast
안녕하세요 @delavnog, 당신에게 이런 일이 있습니까? codepen.io/panchroma/pen/wMXWpY . 당신에게 유일한 중요한 것은 647 행의 HTML과 CSS입니다
— David Taiaroa
@delavnog, codepen.io/panchroma/pen/JGZKqy 페이지에 최소한의 내용이있는 동일한 아이디어
— David
고마워요! 이제 nav와 footer 사이에 세로 div를 중앙에 배치 할 수 있다면 정말 좋을 것입니다! 코드 펜 편집 : codepen.io/anon/pen/rxKMaW (내비게이션이 콘텐츠의 최상위를 차지하기 때문에 본문에 여백을 추가해야했습니다)
— blueFast
@delavnog, 본체가 너무 높지 않은 경우 시작입니다. 더 긴 콘텐츠를 위해서는 더 많은 작업이 필요합니다 : codepen.io/panchroma/pen/vLrXMq
— David
30

오늘 은 Sticky Footer 단순화 코드 가 있습니다. 왜냐하면 항상 최적화하고 있기 때문입니다.

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— 레니 엘 맥 카페리
소스
1
완벽한 솔루션. 그것이 내가 찾던 것입니다.
— Levimatt
1
불행하게도이 바닥 글의 크기는 고정되어 있습니다. 때로는 바닥 글이 동적 일 때 CSS의 높이보다 크거나 작을 수 있습니다.
— 23W
27

나는 조금 늦게 주제에있어하지만 난 단지 그 질문에 물린 그리고 마지막으로는, 단순히 사용을 통해 얻을 수있는 정말 쉬운 방법을 발견했습니다 나는이 게시물에 건너 온 navbar와 navbar-fixed-bottom클래스를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

— 아이 밀
소스
나는 대답의 단순성과 효과를 좋아합니다. 같은 문제에 대한 많은 답변은 jquery와 복잡한 것들로 가득합니다. 고마워요
— digitai
1
절반 크기의 솔루션이므로 크기를 조정하면 페이지의 내용이 겹치는 부분을 처리해야합니다.
— Baldráni
@ Baldráni 완전한 해결책이 아닙니다. 바닥 글 html에서 Bootstrap 행과 col을 사용하면 겹치는 문제가 발생하지 않습니다 (어쨌든해야 할 일입니다)
— Tino Mclaren
끈적 거리는 바닥 글이 아닙니다. 탐색 표시 줄 내용에만 적합하고 페이지 내용과 겹치는 고정 된 아래쪽 탐색 모음입니다.
— Zim
10

이 문제에 대한 업데이트 된 솔루션은 다음과 같습니다. 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

그리고 이것을 다음과 같이 사용하십시오 : 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

또는 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— zee
소스
4
바닥 글이 고정되어있어 페이지 내용 (있는 경우)과 겹치므로 이는 좋은 해결책이 아닙니다. some text<br>바닥 글 앞에 몇 줄을 추가 하고 창 크기를 줄이십시오.
— jmarceli
@ user2041318 : 네, 끔찍합니다 ...이 점을 지적 해 주셔서 감사합니다.
— Sebastian
이것은 jmarceli 의견에 따라 수정되었습니다. 바닥 글이 더 이상 고정되지 않습니다.
— zee
3

스티커 예제는 저에게 효과적이지 않습니다. 내 해결책 :

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— 안디 기가
소스
간단하고 좋은 구식 CSS. 작업이 완료되었습니다. 나는 높은 등급의 답변 중 일부가 얼마나 복잡했는지 재미있다. 부트 스트랩은 우리의 삶을 더 편하게 만들어주지 않습니까? 😂
— Kal
2

푸시 div는 다음이 wrap아닌. 바로 다음으로 이동해야합니다 . 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— 요셉
소스
2

OP에 의해 답변 됨 :

이것을 CSS 파일에 추가하십시오.

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
— 코드 캐스터
소스
2

나는 유연한 끈적 끈적한 바닥 글을 원했기 때문에 여기에 왔습니다. 최고의 답변을 통해 올바른 방향으로 나아갈 수있었습니다.

현재 (10 월 2 일) Bootstrap 3 css 스티커 바닥 글 (고정 크기)은 다음과 같습니다.

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

바닥 글의 크기가 고정되어있는 한, 본체 여백은 바닥 글을 넣을 수있는 푸시를 생성합니다.이 경우 둘 다 60px로 설정됩니다. 그러나 바닥 글이 고정되어 있지 않고 높이가 60px를 초과하면 페이지 내용이 포함됩니다.

유연하게 만들기 : CSS 본문 여백 및 바닥 글 높이를 삭제합니다. 그런 다음 JavaScript를 추가하여 바닥 글 높이를 얻고 본문 marginBottom을 설정하십시오. 이는 setfooter () 함수로 수행됩니다. 그런 다음 페이지가 처음로드 될 때와 크기 조정시 setfooter를 실행하는 이벤트 리스너를 추가하십시오. 참고 : 바닥 글에 아코디언이 있거나 창 크기를 조정하지 않고 크기 변경을 트리거하는 다른 항목이 있으면 setfooter () 함수를 다시 호출해야합니다.

스 니펫을 실행 한 다음 전체 화면으로 데모를 실행하십시오.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
스 니펫 확장

— 스터너
소스
2

간단한 js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

업데이트 # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
소스
1

이 모든 것을 요약하려면 바닥 글을 제외한 모든 항목이 포함 min-height: 100%하거나 그 이하로 설정 해야합니다 .

— kshirish
소스
1

LESS를 사용하여 패딩으로 단순화 된 스티커 바닥 글 코드를 작성합니다. 이 답변은 주제가 패딩에 대해 이야기하지 않기 때문에 주제와 맞지 않을 수 있으므로 관심 이 있으시면 이 게시물 에서 자세한 내용을 확인 하십시오.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— 프레드 케이
소스
1

를 기반으로 Jek-fdrv의 대답 , 나는 추가 .on('resize', function()확인이 모든 장치와 모든 해상도에서 작동하기 위해 :

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— iamchriswick
소스
1

현재 버전의 부트 스트랩이이 기능에서 더 이상 작동하지 않는 것 같습니다. sticky-footer-navbar 예제를 다운로드하고 본문 영역에 많은 양의 컨텐츠를 배치하면 바닥 글이 뷰포트의 맨 아래로 밀려 나옵니다. 전혀 끈적이지 않습니다.

— CJ 카탈 라노
소스
1

다음은 반응 형 가변 높이 고정 바닥 글에 대한 CSS 기반 솔루션입니다.
장점 : 바닥 글은 높이를 더 이상 CSS에서 하드 코딩 할 필요가 없으므로 가변 높이를 허용합니다.

코드 스 니펫 표시

그리고 여기에 접두사가 붙지 않습니다 SCSS(for gulp/ grunt) :

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— 타오
소스
1

플렉스를 사용하십시오! HTML에서 body와 main을 사용해야하며 IE9 지원이 필요한 경우를 제외하고는 최상의 솔루션 중 하나입니다. 고정 된 높이나 비슷한 것이 필요하지 않습니다.

Materialise에도 권장됩니다!

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

main {
    flex: 1 0 auto;
}
— 켄터
소스
0

Haml & Sass 단어에서 필요한 모든 것 :

하멜 app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

http://getbootstrap.com/examples/sticky-footer-navbar/ 기반

— 동등한
소스
0

바닥 글에 클래스에서 부트 스트랩 빌드를 사용하지 않으려는 경우. 또한 자바 스크립트를 작성해야합니다.

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

고정 바닥 글로 내용이 겹치는 것을 방지하고 padding-bottom 하고 사용자가 창 / 화면 크기를 변경할 때 .

위의 스크립트에서 바닥 글이 다음과 같이 body 태그 안에 직접 있다고 가정했습니다.

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

이것은 피할 수있는 JS 때문에 최상의 솔루션은 아니지만, 겹치는 문제없이 작동하며 구현 및 반응이 쉽습니다 ( heightCSS에서는 하드 코딩되지 않음).

— jmarceli
소스
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
스 니펫 확장

— Gpak
소스
바닥에이 끈적 거림은 어떻습니까?
— Sebastian
0

부트 스트랩에 사용할 수있는 매우 간단하고 깨끗한 끈적 바닥 글이 있습니다. 완전히 반응하는!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

예 : CodePen 데모

— 고스 부르
소스
이 솔루션은 절대 위치로 인해 부트 스트랩 모달을 열 때 바닥 글 막대를 오른쪽으로 이동합니다!
— thethakuri
0

CSS-tricksflexbox 의 사람들에게서 가장 쉬운 방법을 사용 합니다 . 이것은 실제 바닥 글입니다. 내용이 페이지의 100 % 미만이고 페이지의 100 % 이상인 경우 작동합니다.

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

그리고 CSS :

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

이것은 부트 스트랩에 구애받지 않으므로 부트 스트랩과 함께 작동합니다.

— 부스타 윈
소스
0

바닥 글 탐색 모음에 클래스를 추가하면됩니다.

navbar-fixed-bottom

그런 다음 CSS라는 이름의 생성 custom.css 과 몸 이 같은 패딩을 ...

body { padding-bottom: 70px; }
— 이크 람-Ud-Daula
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.