부트 스트랩 3 바닥 글을 바닥으로 플러시합니다. 고정되지 않은
설계중인 사이트에 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>
업데이트 : 이것은 질문에 전체적으로 직접 대답하지는 않지만 다른 사람들은 이것이 유용하다고 생각할 수 있습니다.
반응 형 바닥 글의 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/를보십시오.
flexbox를 마음대로 사용할 수 있습니다. 부트 스트랩 4에서 제공하는 솔루션은 여전히 반응 형 레이아웃에서 겹치는 내용을 사냥합니다. 예 : 모바일보기에서 깨질 것입니다. 가장 깔끔한 트릭을 발견하는 것은 여기에 표시된 flexbox 솔루션 데모를 사용하는 것입니다. ( https://philipwalton.github.io / flexd-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;
}
여전히 어려움을 겪고 있고 원하는 솔루션이 원하는대로 작동하지 않는 경우, 내가 찾은 가장 간단한 솔루션이 여기 있습니다.
기본 컨텐츠를 감싼 후 최소보기 높이를 지정하십시오. 스타일에 필요한 값으로 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%; }
이 방법은 최소 마크 업을 사용합니다. 모든 내용을 .wrapper에 넣으십시오. 여기서 바닥 높이와 같은 여백-하단 및 음의 여백-바닥이 있습니다 (예 : 100px).
html, body {
height: 100%;
}
/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */
.wrapper {
min-height: 100%;
height: auto;
margin: 0 auto -100px;
padding-bottom: 100px;
}
.footer {
height: 100px;
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
부트 스트랩의 경우 :
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
아니면 이거
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>
위 솔루션의 주요 결함은 바닥 글의 높이 가 고정되어 있다는 것 입니다.
그리고 그것은 사람들이 엄청난 수의 장치를 사용하고 당신이 그것을 거의 기대하지 않을 때 장치를 돌리는 나쁜 습관을 가지고있는 실제 세계에서 그것을 자르지 않습니다 ** 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'});
}
// accomodate footer after its html has changed
$('footer').on('DOMSubtreeModified', function(){
$('body').accomodateFooter();
})
// accomodate footer on page load and resize
$(window).on('load 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;
padding-top: 54px;
}
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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<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.1.1-slim</code> and Bootstrap <code>v4-alpha-6</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 />처음 에이 솔루션을 여기에 게시 했지만이 질문에 게시하면 더 많은 사람들에게 도움이 될 수 있음을 깨달았습니다.
Note: I have purposefully wrapped the $([selector]).accomodateFooter() as a jQuery plugin, so it could be run on any DOM element, as in most layouts it is not the $('body')'s bottom-padding that needs adjusting, but some page wrapper element with position:relative (usually the immediate parent of the footer).
None of these solutions exactly worked for me perfectly because I used navbar-inverse class in my footer. But I did get a solution that worked and Javascript-free. Used Chrome to aid in forming media queries. The height of the footer changes as the screen resizes so you have to pay attention to that and adjust accordingly. Your footer content (I set id="footer" to define my content) should use postion=absolute and bottom=0 to keep it at the bottom. Also width:100%. Here is my CSS with media queries. You'll have to adjust min-width and max-width and add or remove some elements:
#footer {
position: absolute;
color: #ffffff;
width: 100%;
bottom: 0;
}
@media only screen and (min-width:1px) and (max-width: 407px) {
body {
margin-bottom: 275px;
}
#footer {
height: 270px;
}
}
@media only screen and (min-width:408px) and (max-width: 768px) {
body {
margin-bottom: 245px;
}
#footer {
height: 240px;
}
}
@media only screen and (min-width:769px) {
body {
margin-bottom: 125px;
}
#footer {
height: 120px;
}
}
참고URL : https://stackoverflow.com/questions/21324395/bootstrap-3-flush-footer-to-bottom-not-fixed
'IT' 카테고리의 다른 글
| adb를 사용할 때 데이터 폴더에 대한 액세스가 거부되는 이유는 무엇입니까? (0) | 2020.05.25 |
|---|---|
| 둥근 사각형 텍스트 필드처럼 UITextview의 스타일을 지정하는 방법은 무엇입니까? (0) | 2020.05.25 |
| 인코딩 / 디코딩의 차이점은 무엇입니까? (0) | 2020.05.24 |
| 리디렉션 URI 란 무엇입니까? (0) | 2020.05.24 |
| 여러 사용자 계정을 병합하기위한 아키텍처 (0) | 2020.05.24 |