Programing

바닥 글 바닥 글 플러시, 트위터 부트 스트랩

lottogame 2020. 3. 21. 10:08
반응형

바닥 글 바닥 글 플러시, 트위터 부트 스트랩

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

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

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

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

출처 : 데모 및 튜토리얼 (더 이상 사용할 수 없음, RIP )

이것은 이제 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

트위터 부트 스트랩 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으로 변경하십시오. 내용이 화면에 맞지 않으면
스크롤 막대가 나타납니다.

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

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

들어 스티커 바닥 글 우리는 두 가지를 사용하는 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;
}

훨씬 간단한 공식 예 : http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

그럼 난의 혼합을 발견 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이것은 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>

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

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

몸을 추가 

  { padding-bottom: 70px; }

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

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

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();
    });
});

가장 간단한 기술은 아마도 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>

로 테스트했습니다 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;
}

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 메인 컨텐츠 컨테이너가 뷰포트 높이에 남아있는 모든 공간을 차지하게하려면 컨테이너 요소에서
#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;
}

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

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

당 부트 스트랩 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>사용자 정의 요소).

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

여기 에는 네비게이션 바가 상단에 있고 바닥 글이 페이지 하단에있는 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

간단하게 유지하십시오.

footer {
  bottom: 0;
  position: absolute;
}

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

다음은 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>

깡깡이

이것이 부트 스트랩이 수행하는 방식입니다.

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

페이지 소스를 사용하면 볼 수 있습니다. <div id="wrap">상단을 잊지 마십시오 .

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

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

아래 클래스를 사용하여 페이지의 마지막 줄로 밀어 넣고 가운데로 만듭니다. Ruby on rails HAML 페이지를 사용하는 경우 아래 코드를 사용할 수 있습니다.%footer.card.text-center

Pls는 트위터 부트 스트랩을 사용하는 것을 잊지 마십시오

다음은 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

HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

CSS

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

참고 URL : https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap

반응형

'Programing' 카테고리의 다른 글

Jupyter Notebook에 Conda 환경이 표시되지 않음  (0) 2020.03.21
명령 행에 Android SDK 빌드 도구를 설치하는 방법은 무엇입니까?  (0) 2020.03.21
node.js에서 로컬 IP 주소 가져 오기  (0) 2020.03.21
전자 : jQuery가 정의되지 않았습니다  (0) 2020.03.20
JavaScript 객체 키 목록 가져 오기  (0) 2020.03.20

'Programing'의 다른글

  • 현재글바닥 글 바닥 글 플러시, 트위터 부트 스트랩

관련글

댓글

티스토리툴바