부트스트랩 3 풋터를 아래쪽으로 플러시합니다.고정되지 않은
저는 제가 설계하고 있는 사이트에 부트스트랩 3을 사용하고 있습니다.
저는 이 샘플과 같은 족자를 갖고 싶습니다.견본
부트스트랩 navbar-fixed-bottom으로는 문제가 해결되지 않도록 고정하고 싶지 않습니다.저는 단지 그것이 항상 내용의 가장 아래에 있고 또한 반응하기를 원합니다.
어떤 안내라도 해주시면 대단히 감사하겠습니다.
편집:
제가 잘 모르셨다면 죄송합니다.콘텐츠 본문에 콘텐츠가 충분하지 않을 때 발생하는 일입니다.발이 위로 올라가다가 밑에 빈 공간이 남습니다.
이것이 내 navbar를 위해 지금 가지고 있는 것입니다.
<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;
}
부트스트랩에서 간소화된 솔루션이 있습니다(새로운 클래스를 생성할 필요가 없는 경우).http://getbootstrap.com/examples/sticky-footer-navbar/
해당 페이지를 열면 브라우저와 "View Source(소스 보기)"를 마우스 오른쪽 버튼으로 클릭하고 sticky-footer-navbar.slim 파일(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>
아래의 예를 참조하십시오.이렇게 하면 페이지의 내용이 적으면 바닥글이 아래로 고정되고 페이지의 내용이 많으면 일반 바닥글처럼 동작합니다.
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>
업데이트: 부트스트랩의 새로운 버전은 포장지를 추가하지 않고 끈적거리는 바닥판을 추가하는 방법을 보여줍니다.자세한 내용은 Jboy Flaga's Answer.
flexbox를 마음대로 사용할 수 있습니다.부트스트랩 4에서 제공하는 솔루션은 응답성이 뛰어난 레이아웃의 콘텐츠와 겹칩니다. 예를 들어, 모바일 보기에서 깨질 것입니다. 여기에 나와 있는 플렉스박스 솔루션 데모를 사용하는 것이 가장 멋진 방법입니다. (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 의 , .<hr>답입니다(). 첫번째는 첫번째 답입니다 (2016년에 돌려드립니다)
위 솔루션의 가장 큰 결점은 바닥판의 높이가 고정되어 있다는 것입니다.
그리고 사람들이 전혀 예상하지 못할 때 수많은 장치를 사용하고 회전시키는 나쁜 습관을 가지고 있는 현실에서 이는 문제를 해결하지 못합니다. 그리고 **펑!** 바닥글 뒤에 당신의 페이지 내용이 있습니다!
에서는 를 을 으로 합니다 이 하는 하고 의 합니다 이 을 동적으로 조정하는 기능이 합니다.padding-bottom그 높이를 맞추기 위해서입니다.그리고 이 작은 기능을 페이지에서 실행해야 합니다.load그리고.resize뿐만 DOMSubtreeModified(발가락이 비동기적으로 업데이트되거나 상호 작용 시 크기가 변경되는 애니메이션 요소가 포함되어 있는 경우).
jQuery jQuery 한 이 를 이 한 를 v3.0.0v4-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수서e수ns될도steamm,u,njtyn,tosnd떤su의yt은t에서$('body')의bottom-padding그것은 조정이 필요하지만, 어떤 페이지 래퍼 요소는position:relative으로 의 입니다).footer).
나중에 편집(최초 답변 후 3년 이상 경과):
이 시점에서 저는 페이지 하단에 동적 컨텐츠 바닥글을 배치하는 데 자바스크립트를 사용하는 것을 더 이상 허용할 수 없다고 생각합니다.플렉스박스, 라이트닝 패스트, 크로스 브라우저를 사용하여 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>이 방법은 최소 마크업을 사용합니다.바닥 높이와 동일한 패딩-바닥 및 마이너스 마진-바닥을 가진 .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>
아니면 이거.
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>
부트스트랩의 경우:
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
바닥글에 navbar-inverse 클래스를 사용했기 때문에 이 솔루션 중 어떤 것도 완벽하게 적용되지 않았습니다.하지만 저는 자바스크립트가 없는 효과가 있는 솔루션을 얻었습니다.Chrome을 사용하여 미디어 쿼리를 형성했습니다.화면 크기에 따라 바닥판의 높이가 달라지기 때문에 신경을 쓰고 조절해야 합니다.바닥글 내용(내 내용을 정의하기 위해 id="footer"를 설정함)은 하단에 유지하려면 postion=absolute와 bottom=0을 사용해야 합니다.또한 너비: 100%.여기 미디어 쿼리가 있는 제 CSS가 있습니다.최소 너비와 최대 너비를 조정하고 일부 요소를 추가 또는 제거해야 합니다.
#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;
}
}
Flexbox를 사용하면 다음과 같은 이점을 얻을 수 있었습니다.
.body-class {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.body-content {
flex: 1 0 auto;
width: 100%;
}
.footer {
width: 100%;
height: 60px;
background-color: #f5f5f5;
flex: none;
}
출처 : https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
아무 클래스나 사용하고 키를 고정시켜 주세요.제 문제가 해결됐어요.
<div class="container"></div>
<footer></footer>
CSS:
.container{
min-height: 60vh;
}
언급URL : https://stackoverflow.com/questions/21324395/bootstrap-3-flush-footer-to-bottom-not-fixed
'programing' 카테고리의 다른 글
| NextGen 갤러리에 라이트박스 효과 추가 워드프레스 (0) | 2023.09.12 |
|---|---|
| 여러 열 중복의 발생을 기준으로 표시 및 그룹화하는 SQL (0) | 2023.09.12 |
| 약간 뒤죽박죽: 어떤 비트가 설정되어 있습니까? (0) | 2023.09.12 |
| mysql의 데이터베이스에서 덤프 파일 생성 (0) | 2023.09.12 |
| getenv()에서 반환된 char*를 해제/삭제해야 합니까? (0) | 2023.09.12 |