Twitter 부트스트랩 3 스티커 바닥글
저는 트위터 부트스트랩 프레임워크를 꽤 오랫동안 사용해 왔는데 최근 버전 3으로 업데이트되었습니다!
스틱 푸터가 바닥에 달라붙는 데 어려움을 겪고 있습니다. 트위터 부트스트랩 웹사이트에서 제공하는 스타터 템플릿을 사용했지만 여전히 운이 좋지 않습니다. 아이디어가 있습니까?
navbar-fixed-bottom 클래스를 바닥글에 추가하기만 하면 됩니다.
<div class="footer navbar-fixed-bottom">
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>
이 css에 대한 링크는 sticky-footer 예제의 소스 코드에서 찾을 수 있습니다.
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
전체 URL: https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
부트스트랩에 이미 있는 것 이외에 추가 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>
방금 추가한 CSS 외에도, 랩 디브를 닫기 전에 푸시 디브를 추가해야 한다는 것을 기억하세요.
HTML의 기본 구조는 다음과 같습니다.
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end 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;
}
에 조금 그 수 정말 쉬운 이했습니다. 주에대조해늦물그방질이문우을려게에서물연시발히마고했견정내사침간세요하용발단히다쉽말있니방습했견수극을법는게할복제금만었금지▁a▁use▁i▁as▁simply▁and▁post사▁i▁to간하세용요단▁but▁subject,히▁it다니발습했▁i주▁get▁question견'방▁a▁been▁over▁finally▁this,▁way▁really▁easy제▁across▁came▁the▁found을있법navbarnavbar-fixed-bottom클래스를 사용할 수 있습니다.예:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
여기 이 문제에 대한 업데이트된 해결책이 있습니다.
/* 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;
}
끈적끈적한 예는 저에게는 통하지 않습니다.내 솔루션:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
더시푸.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>
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;
}
}
저는 유연한 스틱 푸터를 원했기 때문에 여기에 왔습니다.최고의 답변은 저를 올바른 방향으로 이끌었습니다.
현재(10월 16일 2일) 부트스트랩 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를 추가하여 바닥글 높이를 가져오고 본문 여백을 아래로 설정합니다.이 작업은 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>이 문제는 Flexbox를 통해 해결되었습니다.
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
단순 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());
});
이 모든 것을 요약하려면 바닥글을 제외한 모든 것이 가져야 한다는 것을 명심하십시오.min-height: 100%그보다 조금.
저는 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;
}
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");
}
});
현재 버전의 부트스트랩은 이 기능에 더 이상 사용할 수 없는 것 같습니다.스티커-푸터-내비바 예제를 다운로드하고 기본 본문 영역에 많은 양의 콘텐츠를 배치하면 바닥글이 뷰포트의 하단을 지나 아래로 밀립니다.끈적임이 전혀 없습니다.
여기 완전한 응답성 가변 높이 스틱 푸터를 위한 CSS 기반 솔루션이 있습니다.
장점: 바닥글은 높이를 더 이상 CSS로 하드 코딩할 필요가 없기 때문에 다양한 높이를 허용합니다.
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>그리고 여기 접두사가 없는 것이 있습니다.SCSS(의 경우)gulp/grunt):
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
플렉스를 사용하세요!HTML에 body와 main을 사용해야 하며 IE9 지원이 필요하지 않은 경우 최고의 솔루션 중 하나입니다.그것은 고정된 높이나 유사한 것을 필요로 하지 않습니다.
이는 Materialize에도 권장됩니다.
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
HTML
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
CSS
.footer {
position: fixed;
bottom: 0;
}
햄 & 새스 단어로 필요한 모든 것:
은 햄을 의미합니다.app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
사스 포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/ 을 기반
바닥글에 부트스트랩 빌드인 클래스를 사용하려는 경우.또한 자바스크립트를 작성해야 합니다.
$(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>
... 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로 하드코딩되지 않음).
#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 © Your words</p>
</div>
</div>
</div>
</div>
</footer>부트스트랩에서 사용할 수 있는 매우 간단하고 깨끗한 스틱 푸터가 있습니다.완벽한 반응!
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;
}
예: 코드펜 데모
사용.flexboxCSS 트릭의 남자들에게서 찾은 가장 쉬운 방법입니다.이것은 진정한 스티키푸터이며, 내용이 페이지의 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;
}
이것은 부트스트랩에 구애받지 않으므로 부트스트랩과 함께 작동하고 부트스트랩 없이 작동합니다.
바닥글 탐색 모음에서 클래스를 추가하기만 하면 됩니다.
navbar-fixed-bottom
그런 다음 custom.css라는 이름의 CSS를 만들고 이렇게 본문 패딩을 만듭니다.
body { padding-bottom: 70px; }
언급URL : https://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer
'programing' 카테고리의 다른 글
| jQuery를 사용하여 텍스트를 변경하는 방법 (0) | 2023.08.17 |
|---|---|
| IE9 테두리 반지름 및 배경 경사 출혈 (0) | 2023.08.17 |
| jQuery - 다중: 선택기 아님 (0) | 2023.08.17 |
| Ajax 호출 후 페이지 새로 고침을 중지하는 방법은 무엇입니까? (0) | 2023.08.17 |
| 기존에 없는 CSS 클래스를 사용할 수 있습니까? (0) | 2023.08.12 |