설계중인 사이트에 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
이지만 하위 버전에서 작동하지 않는 이유는 없습니다.
jQuery(document).ready(function($) {
$.fn.accomodateFooter = function() {
var footerHeight = $('footer').outerHeight();
$(this).css({
'padding-bottom': footerHeight + 'px'
});
}
$('footer').on('DOMSubtreeModified', function() {
$('body').accomodateFooter();
})
$(window).on('resize', function() {
$('body').accomodateFooter();
})
$('body').accomodateFooter();
window.addMoreContentToFooter = function() {
var f = $('footer');
f.append($('<p />', {
text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
}))
.append($('<hr />'));
}
});
body {
min-height: 100vh;
position: relative;
}
footer {
background-color: rgba(0, 0, 0, .65);
color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
display: block;
}
footer hr {
border-top: 1px solid rgba(0, 0, 0, .42);
border-bottom: 1px solid rgba(255, 255, 255, .21);
}
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Feed that footer - not a game (yet!)</h1>
<p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
<hr />
<blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
</div>
</div>
<footer>I am a footer with dynamic content.
<hr />
</footer>
처음 에이 솔루션을 여기에 게시 했지만이 질문에 게시하면 더 많은 사람들에게 도움이 될 수 있음을 깨달았습니다.
참고 : 나는 의도적으로 포장 한 $([selector]).accomodateFooter()
이 모든 DOM 요소를 실행할 수 있도록 대부분의 레이아웃에이 (가) 아니므로,하는 jQuery 플러그인으로 $('body')
의 bottom-padding
조정이 요구를하지만와 요소 래퍼 일부 페이지 position:relative
(의 보통 바로 위 부모 footer
) .
나중에 수정 (최초 답변 후 3 년 이상) :
이 시점에서 더 이상 페이지 하단에 동적 콘텐츠 바닥 글을 배치하기 위해 JavaScript를 사용할 수 없다고 생각합니다. flexbox, 번개처럼 빠른 크로스 브라우저를 사용하여 CSS만으로도 달성 할 수 있습니다.
여기있어:
// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)
function addMoreContentToFooter() {
var f = $('footer');
f.append($('<p />', {
text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
}))
.append($('<hr />'));
}
.wrapper {
min-height: 100vh;
padding-top: 54px;
display: flex;
flex-direction: column;
}
.wrapper>* {
flex-grow: 0;
}
.wrapper>main {
flex-grow: 1;
}
footer {
background-color: rgba(0, 0, 0, .65);
color: white;
width: 100%;
padding: 1.5rem;
}
footer hr {
border-top: 1px solid rgba(0, 0, 0, .42);
border-bottom: 1px solid rgba(255, 255, 255, .21);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main>
<div class="container">
<div class="starter-template">
<h1>Feed that footer - not a game (yet!)</h1>
<p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
<hr />
<blockquote class="lead">
<strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
</blockquote>
</div>
</div>
</main>
<footer>I am a footer with dynamic content.
<hr />
</footer>
</div>