Twitter Bootstrap을 사용하여 바닥 글을 페이지 하단에 고정
콘텐츠가 많지 않은 웹 페이지가 있고 바닥 글은 페이지 중간에 있지만 맨 아래에 있어야합니다.
모든 페이지를 "홀더"에 넣었습니다.
#holder {
min-height: 100%;
position:relative;
}
그리고 내 바닥 글에 다음 CSS를 사용했습니다.
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
내 바닥 글의 HTML
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by <a href="#">Fishplate</a></li>
<li>Email:exampleemail@gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
바닥 글을 유동적으로 유지하고 싶습니다.
주석에서 논의했듯이이 솔루션을 기반으로 코드를 작성했습니다. https://stackoverflow.com/a/8825714/681807
이 솔루션의 핵심 부분 중 하나는 요소가 작업 할 기본 높이를 갖도록 추가 height: 100%하는 html, body것입니다. #footer이것은 코드에서 누락되었습니다.
html,body{
height: 100%
}
또한 bottom: -50px콘텐츠가 많지 않을 때 콘텐츠를 스크롤없이 볼 수있는 부분으로 밀어 넣기 때문에 사용에 문제가 있다는 것을 알게 될 것 입니다. margin-bottom: 50px앞에 마지막 요소 를 추가 해야합니다 #footer.
바닥 글에 navbar-fixed-bottom 클래스를 추가하기 만하면됩니다.
<div class="footer navbar-fixed-bottom">
위에서 언급 한 대부분의 솔루션은 저에게 효과적이지 않았습니다. 그러나 아래 주어진 솔루션은 잘 작동합니다.
<div class="fixed-bottom">...</div>
http://bootstrapfooter.codeplex.com/
이것은 당신의 문제를 해결할 것입니다.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</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;
color:#fff;
}
다음은 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>
부트 스트랩 클래스를 유리하게 사용하십시오. navbar-static-bottom바닥에 둡니다.
<div class="navbar-static-bottom" id="footer"></div>
CSS flex로 쉽게 얻을 수 있습니다. 다음과 같은 HTML 마크 업이 있습니다.
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
다음 CSS를 사용해야합니다.
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
플레이 할 CodePen은 다음과 같습니다. https://codepen.io/webdevchars/pen/GPBqWZ
'IT박스' 카테고리의 다른 글
| 순환 참조가 해로운 것으로 간주되는 이유는 무엇입니까? (0) | 2020.10.29 |
|---|---|
| 클래스의 속성 얻기 (0) | 2020.10.29 |
| IE11에서 Angular4 응용 프로그램 실행 문제 (0) | 2020.10.29 |
| html / css에서 이미지 옆에 세로 가운데 텍스트를 어떻게 입력합니까? (0) | 2020.10.29 |
| 동등성이 제대로 작동하도록하려면 구조체에서 무엇을 재정의해야합니까? (0) | 2020.10.29 |