programing

페이지 하단으로 바닥글 플러시, 트위터 부트스트랩

testmans 2023. 7. 29. 08:16
반응형

페이지 하단으로 바닥글 플러시, 트위터 부트스트랩

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

하지만 저는 트위터 부트스트랩에 이 접근법을 적용하는 데 어려움을 겪고 있습니다. 아마도 트위터 부트스트랩이 본질적으로 반응성이 있기 때문일 것입니다.트위터 부트스트랩을 사용하여 위 블로그 게시물에 설명된 접근 방식을 사용하여 바닥글을 페이지 하단으로 플러시할 수 없습니다.

이제 이것은 부트스트랩 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

여기에 있는 스니펫이 부트스트랩에 매우 잘 작동한다는 것을 발견했습니다.

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

고정 바닥글이 아닌 Twitter 부트스트랩의 작동 예

<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

않을 때에서 0으로.
콘텐츠가 화면에 맞지 않으면 스크롤 막대가 나타납니다.

스티커 바닥글의 경우 두 가지를 사용합니다.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/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;
    }
}

훨씬 더 간단한 공식 예: 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;
}

부트스트랩 4.3의 최신 버전에서 이 작업은 다음을 사용하여 수행할 수 있습니다..fixed-bottom학급.

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

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

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

자세한 내용은 위치 설명서에서 확인할 수 있습니다.

부트스트랩 4에 내장된 플렉스 유틸리티를 사용하세요!부트스트랩 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메인 디브를 플렉스 용기로 만들기 위해
  • .flex-column열에서 유연한 항목을 정렬하는 메인 디브에서
  • min-height: 100vhdiv에 CSS에서 를 수직으로 .
  • .flex-grow-1기본 내용 컨테이너가 뷰포트 높이에 남아 있는 모든 공간을 차지하도록 하기 위한 요소입니다.

부트스트랩 5를 사용하여 바닥글을 맨 아래로 유지


    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">
     
         <div> <!-- Wrapper (Without footer) -->
       
            <header>
             I am a header.
            </header>
      
            <article>
            I am an article!
            </article>
       
        </div> <!-- End: Wrapper (Without footer) -->
     
     
         <footer>
         I am a footer.
         </footer>
     
    </div>

코드펜의 라이브 데모

메모

  • 모든 것을 포장하고 있는지 확인합니다.<div>클래스가 과 같은 다른 : " 또다음같부은클랩가다블요레소벨"min-vh-100, d-flex,flex-column,justify-content-between .

  • 바닥글 요소를 제외한 모든 요소를 다음으로 묶어야 합니다.<div>또는 다른 블록 레벨 요소.

  • 사용하세요.<footer>또는 바닥글을 감쌀 다른 블록 수준 요소.

코드 설명

  • min-vh-100.

  • flex-column에서는 쌓인 블록 요소를 유지한다는 측면에서 정상적인 문서 흐름의 동작을 유지합니다(본문의 직접 자식이 모두 실제로 블록 요소라고 가정).

  • justify-content-between바닥글을 화면 맨 아래로 밀어넣습니다.

CSS만으로 동일한 방법(바닥글을 하단에 유지)을 확인하세요 -

음, 나는 혼합물을 발견했습니다.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>

그것은 좋은 것 같고 저에게 효과가 있습니다.

enter image description here

의 예 참조

헨리 W의 대답은 좋지만, 제가 원하는 대로 작동하기 위해서는 몇 가지 수정이 필요했습니다.특히 다음과 같은 경우에도 처리됩니다.

  • 먼저 보이지 않음을 표시하고 Javascript에서 볼 수 있는 설정을 통해 페이지 로드 시 "점퍼짐
  • 브라우저 크기 조정을 정상적으로 처리
  • 브라우저가 작아지고 바닥글이 페이지보다 커지는 경우 추가로 바닥글 설정
  • 높이 기능 조정

다음은 이러한 수정 작업을 통해 제게 효과가 있었던 것입니다.

HTML:

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

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

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-fluiddiv에 되었습니다..wrapper클래스. 다음을 시도해보세요.

를 합니다.padding-top:70px의 신의에서.body하여 태그를포다니함합고에 시킵니다..container-fluid 함: 신에대, 이게렇:

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

우리는 이것을 해야만 합니다 왜냐하면 밀어내기.body아래로 내려오면 탐색 모음이 뷰포트를 지나 바닥글을 조금 더(70피트 더) 밀어 스크롤 막대를 얻을 수 있습니다.더 나은 결과를 얻을 수 있습니다..container-fluid대신 디브

다음으로 우리는 그것을 제거해야 합니다..wrapper의 신당밖계 의 수업.container-fluid디브 앤드 랩 당신의#main그것과 함께 div, 이렇게:

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

물론 바닥글은 다음 범위를 벗어나야 합니다..wrapperdiv 그래서 ".div 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;
}

를 조정할 때 하려면 몇 를 들어 화크 기 조 를 정 는 다 하 작 가 른 업 을 수 합 야 정 해 니 다 지 몇 정 재 등 설 를 높 면 이 화 의 면 때 할 ▁and ▁the ▁on ▁the 합 ▁a ▁you ▁is 야 ▁things ▁resetting ▁though ▁the ▁going 니 화 ▁screen ▁height ▁work , ▁to ▁should , ▁when ▁other 해 ▁like.wrapper클래스, 다음과 같은 것:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

이것이 트위터 부트스트랩과 새로운 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>

부트스트랩 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>남은 공간을 100합니다.<body>꼬리표를 달다

여기서 데모 작업: https://codepen.io/maxencemaire/pen/VwvyRQB

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

navbar 구성 요소를 사용하고 .navbar-fixed-bottom 클래스를 추가합니다.

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

몸을 더하다

  { padding-bottom: 70px; }

부트스트랩 4.3의 예에 따르면, 저처럼 제정신을 잃을 경우, 실제 작동 방식은 다음과 같습니다.

  • 바닥글 디비의 모든 부모는 다음과 같이 해야 합니다.height: 100%(h-100
  • ▁to합다니▁the▁of▁direct같야를 가져야 합니다.display: flex(d-flex
  • 바닥글은 다음과 같이 해야 합니다.margin-top: auto(mt-auto

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

예를 들어 Angular를 사용하여 별도의 앱 루트, 메인 앱 구성 요소 및 바닥글 구성 요소에서 보기를 구성했습니다. 이 모든 것이 DOM에 사용자 지정 요소를 추가했습니다.

래퍼: 인 서래작, 을키기위해시저, 이요에클래를추스들가야: 추가다니.h-100을 d-flex 아래로, 한 단 아 래 고 이 동 그 리 로 계 ▁the 이 동 고 ▁one 그 리 ▁moving ▁and , ▁downmt-auto바닥글에서 한 단계 위에 있습니다(그래서 실제로는 더 이상 바닥글 클래스가 아니라 내 것입니다.<app-footer>사용자 정의 요소).

너비 제약 레이아웃을 처리하려면 다음을 사용하여 모서리가 둥글지 않도록 하고 탐색 막대가 응용프로그램의 측면으로 평평하게 되도록 합니다.

<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를 주용를기설것정관과련여하는으로 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;
}

내게 유일하게 효과가 있었던 사람!:

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

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

단순하게 받아들여라.

footer {
  bottom: 0;
  position: absolute;
}

또한 바닥글 높이를 다음과 같이 추가하여 간격띄우기해야 할 수도 있습니다.margin-bottom한 높이의 닥글높동높이한등바body.

다음은 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 입니다.

이 코드를 부트스트랩에 사용하면 작동합니다.

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

은 보기에은처럼 .height:100%chain'은 'chain'에서 있습니다.div#main추가시를 추가해 .height:100%목표에 더 가까워질 수도 있습니다.

다음은 HAML(http://haml.info )에서 확인할 수 있는 접근 방식으로, 페이지 상단에는 navbar가, 하단에는 footer가 있습니다.

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

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

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

반응형

'programing' 카테고리의 다른 글

이 PL/SQL에 문제가 있습니까? 변수 바인딩 *이(가) 선언되지 않았습니다.  (0) 2023.07.29
다른 모듈의 스프링 부트 자동 배선  (0) 2023.07.29
파이썬을 사용하는 이 코드에서 'wb'는 무엇을 의미합니까?  (0) 2023.07.29
기존 도커 컨테이너에 포트 매핑을 할당하려면 어떻게 해야 합니까?  (0) 2023.07.29
테스트 환경에서 MariaDB를 사용하고 운영에서 sql server를 사용하는 방법, 두 가지 모두에 대해 하나의 선택을 사용하는 방법 - Java, Spring  (0) 2023.07.29

'programing'의 다른글

  • 현재글페이지 하단으로 바닥글 플러시, 트위터 부트스트랩

관련글

댓글

티스토리툴바