js 固定底部 footer

除了 display: fixed，方法将 footer 固定在底部，记录下用 js 获取页面 innerHeight，计算出 main 的高度。

HTML：

<body>
  <header>header</header>
  <main class="main">main</main>
  <footer>footer</footer>
</body>

JS：

function windowHeight () {
　　　　 // header: 30px; footer:100px; total:130px
        let mainMinHeight = window.innerHeight - 130
        mainMinHeight = bodyMinHeight > 0 ? bodyMinHeight : 0
        document.getElementsByClassName(‘main‘)[0].style.minHeight = mainMinHeight + ‘px‘
}

原文地址：https://www.cnblogs.com/zhangym118/p/12600272.html

时间： 2024-10-11 12:45:44

js 固定底部 footer的相关文章

html css div固定底部

<div id="father"> <footer></footer> </div> #father{ position:relative; //父元素加入相对定位不加则固定到html底部 } footer { position: absolute; //绝对定位 bottom: 0; left: 50%; //水平居中 transform: translate(-50%, 0%); //调整位置 } 原文地址:https://www

始终固定底部菜单

<html><head><title>阿里西西网页特效演示,始终固定底端导航菜单</title></head><body onLoad="fix()" onScroll="fix()" onResize="fix()"><!--用<body onLoad='fix()' onScroll="fix()" onResize="fix()

JS 固定图片背景

CSS实现Footer固定底部，超过一屏自动撑开

方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏(参考<div绝对居中.宽高自适应.多栏宽度自适应>),但是有了这两个,只能另寻他路,由于高版本浏览器对box-sizing的支持,我们可以在100%的高度中通过padding给header.footer空出两部分空白区域,再通过给header设置等同于自身高度的负值margin-bottom,给

sticky footer布局，定位底部footer

其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sticky footer</title> <style type="text/css"> /* 第一

table左边固定-底部横向滚动条

是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo. 原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条对里面的tr设置{position: relative;}相对定位对tr里面的第一个td设置fixed .fixed {

布局文件采用“-dp”实现“少则紧随listView底部，多则固定底部”

主要实现的功能: 数据少的时候则布局显示的效果为:下面的button紧随listView下面: 数据多的时候:button则固定在整个界面的底部. 布局文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation=&q

xib中UIScrollView固定底部内容

UIScrollView的高度在xib中设置需要固定的部分用代码添加: UIImageView *textLogo = [[UIImageView alloc] initWithFrame:CGRectMake((kMSScreenWith - 153)/2, (kMSScreenHeight - 118 > 549 ? kMSScreenHeight : 667) - 173, 153, 35)]; textLogo.image = [UIImage imageNamed:@"ppb_

将CSS放头部，JS放底部，可以提高页面的性能的原因

css不阻止dom的解析 js阻止dom的解析 css js都会阻止dom的渲染原因: js有可能影响dom的解析,比如在js里面新增dom等这些操作 css不能影响dom的解析而 dom的渲染是需要等js,css都解析完成后才进行的(浏览器就是这么机智),所以css js都阻止dom的渲染