페이지 바닥까지 바닥 글 플러시, 트위터 부트 스트랩

306

나는 일반적으로 CSS를 사용하여 바닥 글을 플러시하는 기술에 익숙합니다.

그러나 트위터 부트 스트랩에서 작동하기 위해이 방법을 사용하는 데 문제가 있습니다. 트위터 부트 스트랩이 본질적으로 반응하기 때문입니다. 트위터 부트 스트랩을 사용하여 위 블로그 게시물에 설명 된 접근 방식을 사용하여 바닥 글을 페이지 하단으로 플러시 할 수 없습니다.

css  twitter-bootstrap  footer 
— 캘빈 Cheng
소스
영업 이익이 트위터 bootstrap.As 작업 한 싶어 명심 아래 모든 대답 시험 전에 그것이 이유는 내 대답을 테스트하는 것이 자바 스크립트 enabled.For입니다 무엇을 의미하는지 반드시, jQuery로 트위터 부트 스트랩 작품되지 않습니다 : stackoverflow.com / questions / 10099422 /…
— HenryW
4
— 사용자
1
링크가 끊어졌습니다! 누구나 공식 예제 링크를 수정할 수 있습니까?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar 4.0 때문에 향후 버전이 될 수 있습니다.
— 암 마드 칼리드

답변:

323

스 니펫 이 부트 스트랩에 실제로 잘 작동 한다는 것을 알았 습니다.

HTML :

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS :

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
— 추 안영
소스
이것이 지금까지 시도한 최고의 솔루션입니다. 이것을 대답으로 받아 들였습니다.
— Calvin Cheng
안녕하세요,이 방법을 구현했지만 훌륭하게 작동하지만 이제는 iPhone에 페이지를 표시하는 데 문제가 있습니다 (페이지가 확대되어 있음). 어떤 아이디어가 문제입니까? 세부 사항은 다음과 같습니다. stackoverflow.com/questions/18621090/…
— pupadupa
94
이 답변을 읽었으며 아래로 스크롤하지 않은 경우 다른 답변을
— 살펴볼
4
— HenryW
1
이것이 내가 Bootstrap에서 찾은 가장 좋은 방법입니다. 장치 응답에 대해 서로 다른 화면 크기에 대한 미디어 업데이트 #main에 쿼리와 .footer 높이를 사용하여 기억
— SyntaxGoonoo
466

이것은 이제 Bootstrap 2.2.1에 포함되어 있습니다.

부트 스트랩 3.x

navbar 구성 요소를 사용하고 .navbar-fixed-bottom클래스를 추가하십시오 .

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

부트 스트랩 4.x

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

body { padding-bottom: 70px; }페이지 내용 을 추가 하거나 포함하는 것을 잊지 마십시오 .

문서 : http://getbootstrap.com/components/#navbar-fixed-bottom

— 사논
소스
35
@ChuanYeong 불행히도 없습니다 navbar-static-bottom.
— Lawrence Woodman
25
@MikeCurry 그는 고정 바닥 글에 대해 묻지 않았지만 페이지에 바닥 글을 유지할 충분한 콘텐츠가없는 경우 빈 공간을 "채우는"바닥 글에 대해 물었습니다. 바닥 글이 정보 용인 경우 고정 된 공간은 소중한 공간 만 차지합니다.
— rdlu
22
위치가 고정되어 있기 때문에 끈적 끈적한 바닥 글이 아닙니다.
— 옳지
9
그러나이 솔루션은 페이지 하단이 아닌 뷰포트 하단으로 만 플러시됩니다. 즉 바닥 글은 항상 표시됩니다.
— rism
3
혼란을주기 때문에 답을 내려야했다. OP는 끈적한 바닥 글을 원하지 않는다.
— HenryW
77

트위터 부트 스트랩 NOT STICKY FOOTER의 실례

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

사용자가 devtools를 열거 나 창 크기를 조정할 때 항상 업데이트되는 버전입니다.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

최소한 요소가 필요합니다. #footer

내용이 화면에 맞으면 스크롤 막대를 원하지 않으면 값을 10으로 변경하십시오. 내용이 화면에 맞지 않으면
스크롤 막대가 나타납니다.

— 헨리
소스
9
네, 이것도 같이갔습니다. CSS는 때때로 너무 어리 석습니다. 불가능하지는 않지만 범용 솔루션을 사용하기가 어려울 수 있으며 레이아웃에서 이와 같은 성가신 문제를 해결하면 스택 교환, 여러 요점 수정, 브라우저 간 테스트 및 간단한 JS에 대한 최종 항복을하지 않아야합니다. 장난. 예, 조금 더러워졌지만 적어도 작동합니다.
— meecect
3
내가 본 모든 단일 솔루션이 잘못되었습니다. 이것은 브라우저가 크기를 조정하는 경우 내용을 가리지 않고 페이지 하단에 바닥 글을 붙이는 것입니다.
— Dave
13
이 didnt 한 작업 조용한 아니라 나를 위해 예상대로 여전히 더 나은 해답 중 하나는, 내가 대체하여 내 문제를 해결 $('#footer').height();와$('#footer').outerHeight();
— DarkMukke
3
좋은 대답입니다! 나는 여기에 그것을 향상시킬 것으로 생각되는 몇 가지 적응이 있었다 : stackoverflow.com/a/36385654/8207
— Cory
6
내가 찾은 최고의 답변. 창 크기를 조정 한 후에 작동하게하려면 응답의 기본 코드를 내부에 $(window).resize(function() {//main code goes here});넣고 $(window).resize();페이지가로드 될 때 설정하도록 호출 하십시오.
— Szymon Sadło
36

공식 페이지에서이를 구현하는 방법은 다음과 같습니다.

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

방금 테스트 한 결과 훌륭합니다! :)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

관련 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
— 레니 엘 맥 카페리
소스
7
이것을 게시 해 주셔서 감사합니다.이 프로젝트는 내 특정 프로젝트에 가장 적합한 솔루션 일뿐입니다. 물론 프로젝트 자체에서 직접 제공하는 것이 좋습니다.
— Cory W.
1
거래가 무엇인지 모르겠지만 페이지에 스크롤을 추가하지 않고는 거래를 할 수 없었습니다. .wrapper CSS를 변경하여 최소 높이가 "calc (100 %-120px)"이며 120px는 바닥 글의 높이이며 HTML에서 <div id = "push"> </ div>를 제거했습니다. 필요하지 않은 페이지에 높이를 추가하는 것 외에는 아무것도하지 않는 것 같습니다.
— jammyman34
36

들어 스티커 바닥 글 우리는 두 가지를 사용하는 DIV's기본의 HTML에 끈적 끈적한 바닥 글 효과. 다음과 같이 작성하십시오.

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— Sandeep
소스
7
그는 트위터 부트 스트랩을 사용하고 있다고 말했다. HTML을 완전히 다시 쓰지 않고 이것을 부트 스트랩에 통합하는 가장 쉬운 방법은 무엇입니까?
— 코디 그레이
1
영업 희망 다음 스티커 바닥 글의 효과를 얻을 수 있다면 그는 자신의 마크 업 변경해야
— 하기 Sandeep
감사합니다! 이것은 실제로 Bootstrap을 사용하는 ASP.NET MVC5 사이트에서 나를 위해 일한 유일한 방법이었습니다. +1
— Yann Duran
19

그럼 난의 혼합을 발견 navbar-inner하고 navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

그것은 좋아 보이고 나를 위해 일합니다.

여기에 이미지 설명을 입력하십시오

의 예를 참조하십시오 Fiddle

— 막심 쇼우 스틴
소스
2
가장 단순하고 가장 우아한 솔루션. 이 부트 스트랩과 호환되지 않습니다으로 집에 자신의 CSS 코드를 양조의 의심을해야합니다
— 1-14x0r
나는 이것을 사용했고, 화면보다 짧은 페이지의 오래된 안드로이드 (아마도 어쩌면?)에 문제가있었습니다. 그렇지 않으면 FF, Chrome, IE11, iPhone, nexus 7에서 잘 작동했습니다.
— bnieland
완벽하고 매우 간단합니다!
— ramires.cabral
18

에서 최신 버전의 부트 스트랩 4.3, 이것은 사용하여 수행 할 수 있습니다 .fixed-bottom클래스를. 

<div class="fixed-bottom"></div>

바닥 글과 함께 사용하는 방법은 다음과 같습니다. 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

당신은 더 많은 정보를 찾을 수있는 위치 문서 여기를 .

— 모하메드 알리 자마 오이
소스
1
이것은 여전히 ​​공식 4 버전을 제공합니다.
— klewis
getbootstrap.com/docs/4.1/examples/sticky-footer 의 예제 는 footer 요소에 line-height = 60px 스타일입니다. 이것은 불필요 할뿐만 아니라 바닥 글이 하나 이상의 div 요소의 부모 인 경우 바닥 글이 제대로 작동하지 않도록합니다.
— ScottyB
13

HenryW의 대답 은 좋지만 원하는 방식으로 작동하도록 몇 가지 조정이 필요했습니다. 특히 다음 사항도 처리합니다.

  • 먼저 보이지 않는 것으로 표시하고 자바 스크립트에서 표시되도록 설정하여 페이지로드시 "점프"방지
  • 브라우저를 다루는 것은 정상적으로 크기 조정
  • 브라우저가 작아지고 바닥 글이 페이지보다 커지면 바닥 글을 설정하여 페이지를 백업하십시오.
  • 높이 기능 조정

그 조정으로 나를 위해 일한 것은 다음과 같습니다.

HTML :

<div id="footer" class="invisible">My sweet footer</div>

CSS :

#footer {
    padding-bottom: 30px;
}

자바 스크립트 :

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
— 코리
소스
11

이것은 나를 위해 완벽하게 작동했습니다.

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

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

나는 이것을 다음과 같이 사용했다 :

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

그리고 전체 너비에서 아래쪽으로 설정됩니다.

편집 : 바닥 글이 항상 보이도록 설정합니다.이를 고려해야합니다.

— sp_omer
소스
10

.container-fluid끈적 끈적한 바닥 글이 작동하려면 div 를 감싸 야하며 .wrapper클래스의 일부 속성이 누락되었습니다 . 이 시도:

태그 padding-top:70px에서를 제거하고 대신에 body포함 시키십시오 .container-fluid.

.wrapper > .container-fluid {
    padding-top: 70px;
}

우리는 밀고 있기 때문에이 작업을 수행 할 필요가 body내려하는 것은 우리가 스크롤을 얻을 수 있도록 뷰포트지나 (70 픽셀 더) 조금 더 바닥 글을 눌러까지의 네비게이션 바의 끝을 수용 할 수 있습니다. .container-fluid대신 div를 밀어 더 나은 결과를 얻을 수 있습니다.

다음으로 우리는 div .wrapper외부 의 클래스 를 제거하고 .container-fluiddiv를 감싸 야합니다 #main.

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

물론 바닥 글은 .wrapperdiv 외부에 있어야 하므로`.wrapper div에서 제거하고 다음과 같이 외부에 배치하십시오.

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

모든 것이 끝나면 .wrapper다음과 같이 음수 여백을 사용하여 바닥 글을 클래스에 더 가깝게 밀어 넣으십시오 .

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

그리고 그것은 작동해야하지만, .wrapper클래스 의 높이를 재설정하는 것처럼 화면 크기를 조정할 때 작동하도록 다른 몇 가지 사항을 수정해야 할 수도 있습니다 .

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— 안드레스 일리치
소스
9

이것은 Twitter Bootstrap과 새로운 navbar-fixed-bottom 클래스로 올바른 방법입니다. (이걸 찾는 데 얼마나 오래 걸 렸는지 모르겠습니다)

CSS :

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML :

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
— 레기 스 B.
소스
9

Bootstrap 4에 내장 된 flex 유틸리티를 사용하십시오! 다음은 주로 Bootstrap 4 유틸리티를 사용하여 얻은 것입니다.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex 메인 div를 플렉스 컨테이너로 만들기
  • .flex-column 기본 div에서 플렉스 항목을 열에 정렬
  • min-height: 100vh 뷰포트를 세로로 채우려면 스타일 속성이나 CSS를 사용하여 기본 div에
  • .flex-grow-1 컨테이너에서 기본 콘텐츠 컨테이너가 뷰포트 높이에 남아있는 모든 공간을 차지하도록하는 요소입니다.
— EGhost57
소스
Bootstrap min-height: 100vh의 min-vh-100클래스 대신 사용할 수 있습니다.
— ikonuk
이 솔루션은 @ikonuk
— TGR
4

navbar 구성 요소를 사용하고 .navbar-fixed-bottom 클래스를 추가하십시오.

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

몸을 추가 

  { padding-bottom: 70px; }
— 관리자 파일 3
소스
3

너비 제약 조건 레이아웃을 처리하려면 모서리가 둥글 지 않고 탐색 막대가 응용 프로그램의 측면과 수평이되도록 다음을 사용하십시오.

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

그런 다음 CSS를 사용하여 높이, 글꼴 및 색상을 조정하기 위해 부트 스트랩 클래스를 재정의 할 수 있습니다

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
— 1-14x0r
소스
3

jQuery를 사용하여이를 처리 할 수 ​​있습니다.

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
— 덕 쿠옹
소스
2

나를 위해 일한 유일한 사람! :

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— 리카르도
소스
2

가장 간단한 기술은 아마도 navbar-static-bottom메인 컨테이너 div를 height: 100vh(새로운 CSS3 뷰 포트 비율 ) 로 설정하는 것과 함께 부트 스트랩을 사용하는 것입니다 . 바닥 글을 바닥으로 플러시합니다.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
— 팬 왕 페라 wong
소스
2

로 테스트했습니다 Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— 두샨 마 하르
소스
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

바닥 글 높이는 랩 요소의 하단 들여 쓰기 크기와 일치합니다.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— 샤프리스 512
소스
1

다음은 Flexbox를 사용하는 최신 버전의 부트 스트랩 (작성시 4.3)에 대한 솔루션입니다.

HTML :

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS :

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

그리고 코드 펜 예제 : https://codepen.io/tillytoby/pen/QPdomR

— 톰 티
소스
1

당 부트 스트랩 4.3 예를 들어 , 내가했던 것처럼 경우에 당신이 당신의 정신을 잃고있어,이 실제로 작동하는 방법이다 :

  • 가지고 바닥 글 DIV 필요의 모든 부모 height: 100%( h-100클래스)
  • 바닥 글의 직접적인 부모가 있어야합니다 display: flex( d-flex클래스)
  • 바닥 글이 있어야합니다 margin-top: auto( mt-auto클래스).

문제는 현대 프론트 엔드 프레임 워크에서 종종 이러한 요소 주위에 추가 래퍼가 있다는 것입니다.

예를 들어 Angular를 사용하면 별도의 앱 루트, 기본 앱 구성 요소 및 바닥 글 구성 요소에서 뷰를 구성했습니다.이 구성 요소는 모두 사용자 정의 요소를 DOM에 추가했습니다.

추가를 : 그래서, 그것은 작동하도록, 나는이 래퍼 요소에 클래스를 추가했다 h-100이동, d-flex한 단계 아래로, 그리고 이동 mt-auto더 이상 (그래서 실제로 바닥 글 클래스에 아니에요 바닥 글에서 한 단계 위로,하지만 내에서 <app-footer>사용자 정의 요소).

— MrValueType
소스
나는 태그 에 넣어야 class="h-100"했다 <html>.
— Kel Solaar
1

부트 스트랩 에서이 코드 조각을 사용하십시오.

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— 산 제이
소스
1

부트 스트랩 v4 + 솔루션

다음은 HTML 구조 또는 패딩과 관련된 추가 CSS 속임수를 다시 생각할 필요가없는 솔루션입니다.

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

이 솔루션은 유연한 높이의 바닥 글을 허용하며 특히 축소 할 때 내용 줄 바꿈을 사용하여 여러 화면 크기의 페이지를 디자인 할 때 특히 유용합니다.

왜 이것이 작동 하는가

  • style="height:100%;"<html>태그가 문서의 전체 공간을 차지 하게합니다 .
  • 클래스 d-flex가 태그로 설정 display:flex됩니다 <body>.
  • 클래스 flex-column가 태그로 설정 flex-direction:column됩니다 <body>. 그 아이 ( <header>, <main>, <footer>및 기타 직접 아이)는 이제 수직으로 정렬됩니다.
  • 클래스 h-100가 태그로 설정 height:100%되어 <body>전체 화면을 세로로 덮습니다.
  • 클래스 flex-grow-1는 flex-grow:1로 설정 되어 <main>남아있는 수직 공간을 채우도록 효과적으로 지시하므로 <body>태그에서 이전에 설정 한 100 % 수직 높이가됩니다 .

실무 데모 : https://codepen.io/maxencemaire/pen/VwvyRQB

flexbox에 대한 자세한 내용 은 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 를 참조 하십시오 .

— 카트 란 닥스
소스
h-100클래스가 제대로 작동하지 않으면을 사용하는 것이 좋습니다 min-vh-100.
— ikonuk
@ikonuk "정상적으로 작동하지 않는다"는 것은 무슨 뜻입니까? 정교하게 작성하십시오.
— Kathandrax
때문에 h-100클래스는 항상 부모 요소의 높이에 따라 적절히 일부의 경우에서 작동하지 않을 수 있습니다. 뷰포트 하단에 바닥 글을 원하므로 뷰포트 높이를 사용하는 것이 좋습니다.
— ikonuk
다시 '일부 사례'를 정의하십시오. 부모 의존성에 대한 귀하의 주장은에 동일하게 적용됩니다 min-width. 코드에서 HTML태그가 height100 % 인 이유 입니다. 예제가 작동하고 CSS height속성에 대한 브라우저 간 지원 이 제공되지 않는 이유를 알 수 없습니다. 궁극적으로 Bootstrap 스 니펫이 번역됩니다.
— Kathandrax
나는 당신의 모범이 작동하지 않는다고 말하지 않았습니다. 모든 사람이 HTML태그 에서 스타일을 사용하는 것은 아닙니다 . 필자의 경우 HTML태그 에서 스타일을 사용하지 않기 때문에 솔루션이 작동하지 않았습니다 . 그리고 body태그가 다른 부모가 아닌 뷰포트에 의존 하고 싶지 않습니다 . 당신은 넣을 필요가 없습니다 style="height:100%;"와 h-100같은 시간에. min-vh-100몸에 두는 것은 단순히 일을하고 코드를 줄입니다.
— ikonuk
0

에서 height:100%'체인'이 고장난 것 같습니다 div#main. height:100%그것에 추가 하면 목표에 더 가까이 갈 수 있습니다.

— 뇌
소스
0

여기 에는 네비게이션 바가 상단에 있고 바닥 글이 페이지 하단에있는 HAML ( http://haml.info ) 의 접근 방식이 있습니다 .

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— 한 네스
소스
답을 좀 더 자세히 설명해 주시겠습니까? 코드 전용 답변은 일반적으로 권장하지 않습니다.
— Qix-MONICA가 MISTREATED
1
좋아, 무엇을 알고 싶니?
— Hannes
나는 그것을 알 필요는 없지만 나중에이 사이트에 오는 사람은 왜 귀하의 답변 코드가 그 역할을하는지 정확히 알지 못할 수도 있습니다 .
— Qix-MONICA가 MISTREATED
아마 그것을 삭제해야합니다. 나는 새로운 소개를 썼다. :)
— Hannes 2016 년
0

간단하게 유지하십시오.

footer {
  bottom: 0;
  position: absolute;
}

margin-bottom바닥 글 높이에 해당하는 부분을 에 추가하여 바닥 글의 높이를 오프셋해야 할 수도 있습니다 body.

— obfk
소스
0

다음은 css3을 사용하는 예입니다.

CSS :

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML :

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

깡깡이

— 승리자
소스
0

미디어 쿼리를 사용하는 또 다른 가능한 솔루션

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
— GeorgeWL
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.