[html] 부트 스트랩 3 바닥 글을 바닥으로 플러시합니다. 고정되지 않은

Html / 글쓴이

설계중인 사이트에 Bootstrap 3을 사용하고 있습니다.

이 샘플과 같은 바닥 글을 갖고 싶습니다.
견본

부트 픽스 navbar-fixed-bottom으로 인해 문제가 해결되지 않도록 수정하는 것을 원하지 않습니다. 나는 그것이 항상 콘텐츠의 맨 아래에 있고 반응하기를 원합니다.

모든 가이드는 대단히 감사하겠습니다.

편집하다:

확실하지 않으면 죄송합니다. 이제 콘텐츠 본문에 충분한 콘텐츠가 없을 때 발생합니다. 바닥 글이 위로 올라간 다음 바닥에 빈 공간이 남습니다.

이것이 내 네비게이션 바에 대해 지금 가지고있는 것입니다.

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

답변

아래 예를 참조하십시오. 이렇게하면 페이지의 내용이 적은 경우 바닥 글이 아래쪽에 고정되고 페이지의 내용이 많은 경우 바닥 글처럼 작동합니다.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

업데이트 : Bootstrap의 새로운 버전은 래퍼를 추가하지 않고 고정 바닥 글을 추가하는 방법을 보여줍니다. 자세한 내용은 Jboy Flaga의 답변을 참조하십시오.

답변

여기 부트 스트랩에서 단순화 된 솔루션이 있습니다 (새 클래스를 만들 필요가 없음) : http://getbootstrap.com/examples/sticky-footer-navbar/

해당 페이지를 열면 브라우저와 “소스보기”를 마우스 오른쪽 단추로 클릭하고 sticky-footer-navbar.css 파일 ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar) 을여십시오 . CSS )

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

이 HTML을 위해

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

답변

flexbox를 마음대로 사용할 수 있습니다. 부트 스트랩 4가 제공하는 솔루션으로 응답 레이아웃, 예를 들어 콘텐츠를 중복 사냥 : 그것은 모바일보기에 휴식 것, 내가 가장 깔끔한 트릭 건너 데모 🙁 여기에 표시 사용 인 flexbox 솔루션이다 https://philipwalton.github.io / solved-by-flexbox / demos / sticky-footer / ) 이런 식으로 우리는 지금까지 쓸모없는 해결책 인 고정 높이 문제를 처리 할 필요가 없습니다 …이 솔루션은 부트 스트랩 3과 4에서 사용합니다.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

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

.Site-content {
  flex: 1;
}

답변

업데이트 : 이것은 질문에 전체적으로 직접 대답하지는 않지만 다른 사람들이 이것을 유용하게 사용할 수 있습니다.

반응 형 바닥 글의 HTML입니다.

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

CSS의 경우

footer{
    width:100%;
    min-height:100px;
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

참고 : 이 질문에 대한 게시 시점에서 위의 코드 줄은 페이지 내용 아래에 바닥 글을 밀어 넣지 않습니다. 그러나 페이지에 내용이 거의 없을 때 바닥 글이 페이지 중간에서 크롤링되지 않도록합니다. 페이지 내용 아래에 바닥 글을 밀어 넣는 예를 보려면 여기 http://getbootstrap.com/examples/sticky-footer/를보십시오.

답변

여전히 어려움을 겪고 있고 답변이 제대로 작동하지 않는 사람들을 위해 내가 찾은 가장 간단한 해결책은 다음과 같습니다.

기본 컨텐츠를 감싼 후 최소보기 높이를 지정하십시오. 스타일에 필요한 값으로 60을 조정하십시오.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

그게 잘 작동합니다.

답변

Galen Gidman은 높이가 고정되어 있지 않은 반응 형 스티커 바닥 글 문제에 대한 훌륭한 솔루션을 게시했습니다. 그의 블로그에서 그의 전체 솔루션을 찾을 수 있습니다 : http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

답변

순수한 CSS 솔루션을 원하면 2nd 이후로 스크롤하십시오 <hr>. 첫 번째는 초기 답변입니다 (2016 년에 다시 제공)

위 솔루션의 주요 결함은 바닥 글의 높이 가 고정되어 있다는 것 입니다.
그리고 그것은 사람들이 엄청난 수의 장치를 사용하고 당신이 그것을 거의 기대하지 않을 때 장치를 돌리는 나쁜 습관을 가지고있는 실제 세계에서는 그것을 자르지 않습니다 ** Po! ** 바닥 글 뒤에 페이지 내용이 있습니다!

실제로는 바닥 글의 높이를 계산하고 해당 높이에 맞게 페이지 내용을 동적으로 조정하는 함수가 필요합니다 padding-bottom. 또한 바닥 글 에서뿐만 아니라 페이지 load및 resize이벤트 에서도이 작은 기능을 실행해야합니다 DOMSubtreeModified(바닥 글이 동적으로 동적으로 업데이트되거나 상호 작용할 때 크기가 변경되는 애니메이션 요소가 포함 된 경우).

다음은 jQuery v3.0.0및 Bootstrap을 사용한 개념 증명 v4-alpha이지만 하위 버전에서 작동하지 않는 이유는 없습니다.

코드 스 니펫 표시

처음 에이 솔루션을 여기에 게시 했지만이 질문에 게시하면 더 많은 사람들에게 도움이 될 수 있음을 깨달았습니다.

참고 : 나는 의도적으로 포장 한 $([selector]).accomodateFooter()이 모든 DOM 요소를 실행할 수 있도록 대부분의 레이아웃에이 (가) 아니므로,하는 jQuery 플러그인으로 $('body')의 bottom-padding조정이 요구를하지만와 요소 래퍼 일부 페이지 position:relative(의 보통 바로 위 부모 footer) .

나중에 수정 (최초 답변 후 3 년 이상) :

이 시점에서 더 이상 페이지 하단에 동적 콘텐츠 바닥 글을 배치하기 위해 JavaScript를 사용할 수 없다고 생각합니다. flexbox, 번개처럼 빠른 크로스 브라우저를 사용하여 CSS만으로도 달성 할 수 있습니다.

여기있어:

코드 스 니펫 표시