gpt4 book ai didi

css - 页脚位置底部问题

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:13 30 4
gpt4 key购买 nike

我希望我的页脚绝对位于页面底部,即使内容小于窗口高度。我已经尝试了所有可能的教程以及所有能想到但做不到的东西。

我的 HTML 语法是:

<html>

<head></head>

<body>

<header>
<div class="wrap"></div>
</header>

<div class="content wrap">
<div class="left"></div>
<div class="right"></div>
</div>

<footer>
<div class="inner"></div>
</footer>

</body>

</html>

该站点是全宽的,我使用 .wrap 和 .inner 类作为宽度:1000px 和 margin 0 auto;

请问有谁能给个解决方案吗?

最佳答案

这是一个使用 jQuery 执行您要求的操作的 fiddle :FIDDLE

基本上你只是比较 body 和 window 的高度,如果 body 更长,将 footer 设置为 absolute,如果较短,将其设置为固定:

$(function () {
//change this to 'display:none'
$('.right').css({'display':'static'});
var footer = $('footer');
var theDocument = $('body');
var theWindow = $(window);
if (theDocument.height() < theWindow.height()) {
footer.css({
'position': 'fixed'
});
} else {
theWindow.height();
footer.css({
'position': 'absolute'
});

}
});

更新:

这里是修复页脚覆盖内容的版本,你只需要将页脚向下移动其高度的大小

FIDDLE

//######  code inside $(function () {}) will run as soon as DOM loads
$(function () {
//change this to 'display:static' to add more content
$('.right').css({'display':'none'});
//sets a custom event handler to window resize + zoom, which triggers the
//footer fix function
$(window).resize(function(){
adjust_footer();
});
//also call this function as soon as document finishes loading
adjust_footer();
});
//#####


function adjust_footer(){
var footer = $('footer');
var theDocument = $('body');
var theWindow = $(window);
//the +footer.height() checks if there is enough space for footer
//to stick it as fixed without having it cover content
if (theDocument.height() +footer.height() < theWindow.height()) {
footer.css({
'position': 'fixed',
//important, or footer will remain misplaced
'bottom':0
});
} else {
theWindow.height();
footer.css({
'position': 'absolute',
//push footer down and align it to the end of content
//meaning if footer's height is 50px, it will be pushed 50px
//from the bottom of the content
//* remember, bottom attribute aligns the element by its bottom
'bottom':- footer.height()
});
}
}

关于css - 页脚位置底部问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23479789/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com