Raf*_*eca 22 html css jquery footer
当我有一个用CSS动态设置高度(例如从数据库获取信息)的页面时,如何将页脚div始终保持在窗口底部？
如果你想使用jQuery,我想出了这个并且工作正常:
设置页脚的CSS:
#footer { position:absolute; width:100%; height:100px; }
设置脚本:
<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();
if (x+100<=y){ // 100 is the height of your footer
$('#footer').css('top', y-100+'px');// again 100 is the height of your footer
$('#footer').css('display', 'block');
}else{
$('#footer').css('top', x+'px');
$('#footer').css('display', 'block');
}
</script>
此脚本必须位于代码的末尾;
Hen*_*ryW 34
我想这会解决你所有的问题:
<script>
$(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>
#footer如果内容适合屏幕而不想要滚动条,只需将10的值更改为0如果内容不适合屏幕,则会显示滚动条.
aga*_*ian 27
我相信你正在寻找一个粘性页脚
试试这个:http: //ryanfait.com/sticky-footer/
从上面的文章:
layout.css中:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
html页面:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Nik*_*a 웃 17
我最喜欢的粘性页脚(非固定)的jQuery/CSS解决方案是这样的:
CSS:
html {
position: relative;
min-height: 100%;
}
footer {
display:none;
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
}
jQuery的:
function footerAlign() {
$('footer').css('display', 'block');
$('footer').css('height', 'auto');
var footerHeight = $('footer').outerHeight();
$('body').css('padding-bottom', footerHeight);
$('footer').css('height', footerHeight);
}
$(document).ready(function(){
footerAlign();
});
$( window ).resize(function() {
footerAlign();
});
演示: http ://codepen.io/anon/pen/ZQxQoR
注意:您的页脚必须开始<footer>和结束</footer>以直接使用这些代码,也可以修改代码以符合您的页脚的ID /类.
小智 9
这是一个简单的解决方案
CSS:
.footer_wrapper { width:100%; background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}
JS:
if ($(".Page").height()<$(window).height()){
$(".footer_wrapper").addClass("fixed");
}else{
$(".footer_wrapper").removeClass("fixed");
}
HTML:
<div class="Page">
/* PAGE CONTENT */
<div class="footer_wrapper" >
/* FOOTER CONTENT */
</div>
</div>
| 归档时间： |
|
| 查看次数： |
92237 次 |
| 最近记录： |