바닥 글이 페이지 하단에 올바르게 고정되도록
- 바닥 글을 웹 페이지의 맨 아래에 유지하려면 어떻게합니까? 답변 25 개
내용이 맨 아래로 이동하지 않으면 바닥 글 (텍스트 줄이있는 div)을 화면 맨 아래에 두거나 내용의 맨 아래에 표시하려고합니다. 컨텐츠에는 스크롤 막대가 필요합니다. 내용에 스크롤 막대가 필요하지 않으면 내용이 완벽하게 작동하지만 내용이 너무 길면 바닥 글이 여전히 같은 지점에 있으며 내용 바로 위에 있습니다.내 기본 div 구조는 다음과 같습니다
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
내 해당 CSS (약간 축소) :
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
가장 간단한 해결책은 사용하는 것입니다
min-height
온
<html>
태그와 위치
<footer>
에
position:absolute;
데모
:
및 SO 스 니펫 :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
왜 사용하지
{ position: fixed; bottom: 0 }
않습니까?
내가 사용하는 간단한 솔루션은 IE8 +에서 작동합니다.
html에 min-height : 100 %를 지정하여 내용이 적을 경우 여전히 페이지가 전체 뷰포트 높이와 페이지 하단에 바닥 글 스틱을 사용하도록합니다. 내용이 증가하면 내용과 함께 바닥 글이 아래로 이동하고 계속 아래로 고정됩니다.JS 바이올린 작업 데모 :
http://jsfiddle.net/3L3h64qo/2/
CSS
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
HTML
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
이것을 사용하십시오. 그것을 고칠 것입니다.
#ibox_footer {
padding-top: 3px;
position: absolute;
height: 20px;
margin-bottom: 0;
bottom: 0;
width: 100%;
}
jQuery를 사용하여
<head></head>
태그에 코드를 넣습니다.
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>
도움이 될 것입니다.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 155px;
}
가장 쉬운 해킹은
min-height
바닥 글이 끝났다고 가정하고 페이지 컨테이너를 400px 로 설정하는 것입니다. 바닥 글에 CSS를 넣지 않아도되거나
width:100%
바닥 글이
<body>
The model being shared here is very similar to Ryan Fait's StickyFooter http://ryanfait.com/sticky-footer
Just one div is missing so far in this discussion (the model proposed here by Kenneth Palanganas worked fine for local Win81 design for about 48 hours and then in ie/chrome collapsed for unknown reason). Ryan's "push" div will satisfy some reluctant browsers. Note that px is usual, however, for liquid layout consistency, em may be preferred.
* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }
<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>
I would like to share how I solved mine using Javascript function that is called on page load. This solution positions the footer at the bottom of the screen when the height of the page content is less than the height of the screen.
function fix_layout(){
//increase content div length by uncommenting below line
//expandContent();
var wraph = document.getElementById('wrapper').offsetHeight;
if(wraph<window.innerHeight){ //if content is less than screenheight
var headh = document.getElementById('header').offsetHeight;
var conth = document.getElementById('content').offsetHeight;
var footh = document.getElementById('footer').offsetHeight;
//var foottop = window.innerHeight - (headh + conth + footh);
var foottop = window.innerHeight - (footh);
$("#footer").css({top:foottop+'px'});
}
}
function expandContent(){
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+
'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+
'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+
'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+
'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}
/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }
#header, #content, #footer{ display: inline-block; width: 100vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
<div id="wrapper">
<div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[some header elements here]
</div>
<div id="content" class="container">
[some content elements here]
</div>
<div id="footer" class="footer">
[some footer elements here]
</div>
</div>
</body>
Hope that helps.
Use min-height as some pixel value, instead of %
.
Like:
min-height:620px;
height:auto;
and footer as:
.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}
참고URL : https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly
'Programming' 카테고리의 다른 글
Java에서 가짜 웨이크 업이 실제로 발생합니까? (0) | 2020.05.08 |
---|---|
Android 앱의 GridView VS GridLayout (0) | 2020.05.08 |
Git 트리거를 사용하여 Jenkins CI를 마스터로 푸시하려면 어떻게해야합니까? (0) | 2020.05.08 |
MySQL의 now () +1 일 (0) | 2020.05.07 |
Angular는 AngularJS $ watch와 동일합니까? (0) | 2020.05.07 |