footer定位页面底部（代码分享）_footer代码

143 浏览量更新于2023-03-16 评论收藏 27KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

footer定位页面底部（代码分享）定位页面底部（代码分享）

本文主要分享了footer定位页面底部的实例代码，具有很好的参考价值。下面跟着小编一起来看下吧

话不多说，请看代码：

<!DOCTYPE html>

<html>

<head>

<title>footer定位</title>

<style>

margin:0;

padding: 0;

}

.box{

width: 100%;

height:300px;

background: pink;

margin-bottom: 30px;

}

.footer{

background: red;

width: 100%;

height:30px;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

$(document).ready(function () {

var theWindow = $(window);

function resized() {

var windowSize=window.devicePixelRatio;

if(windowSize==1){

var hg2 = $(window).height();

var main = $('.main').outerHeight();

var hg4 = $('.footer').outerHeight();

var hg=hg2-hg4

if( hg > main){

$('.footer').css({"position":'fixed','bottom':0,'left':0,"z-index":999,"width":"100%"});

}else{

$('.footer').css({"position":'static'});

}

}else{

$('.footer').css({"position":'static'});

}

theWindow.resize(function () {

resized();

}).trigger('resize');

});

</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38712899

粉丝: 4
资源: 941

会员权益专享

footer定位页面底部（代码分享）

评论0

会员权益专享

最新资源

footer定位页面底部（代码分享）

评论0

页面布局，实现footer永远在底部

详解网站footer沉底效果的三种解决方案

利用CSS使footer固定在页面底部的实例代码

html怎么让footer始终位于底部

网页中的footer怎么固定在页面最下面

Css中 stick footer （特定内容固定底部），简单套路实现

html如何使底部导航框打开页面不显示滑动内容在底部才显示

footer标签添加已运行多长时间的js统计代码

通过CSS浮动排版和定位构建一个页面的布局框架

.slider-footer { height: 80px; background-color: rgb(100, 67, 68); padding: 12px 12px 0 12px; position: relative; }

1.使用所学CSS定位布局等内容实现一个上中下（三行）的弹性页面布局。 2.运用盒模型、定位元素和课内外CSS属性等进行网页美化。代码

html+css+js制作淘宝首页面代码

编写一个采用DIV和CSS设计，采用浮动布局，定位布局或弹性盒子。页面元素包括文字，图片，列表，音视频，超链接，页面除主页外至少包含2个子页面。

设计一个网站1.使用CSS定位布局等内容实现一个上中下（三行）的弹性页面布局。 2.运用盒模型、定位元素和课内外CSS属性等进行网页美化。

如何通过selenium自动化控制鼠标下滑

怎么把脚部放在页面下方

elementuitable固定表尾

jsPdf 自定义页脚

@media print中@top-center和@bottom-center不生效

会员权益专享

最新资源