我的JS如何实现footer居底？

发布于
2017-01-03

我想要的效果：当main的内容小于浏览器窗口的时候，footer在浏览器窗口的底部;当main的内容大于浏览器窗口的时候，footer在页面底部。
我的页面是这样的

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
    <link  href="css/cs.css">
    //cs中现在有main的最小高度
</head>

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


   <script src="js/js.js"> </script>
</body>
</html>

我的思路是这样的，用 window.innerHeight 获取浏览器窗口的高度，用它减去html的高度，如果为正，就把（浏览器窗口的高度-footer-header）得到的值做为main的高度。如果为负，就什么都不考虑，正好正常流可以让footer在页面底部。如果我写的不能理解可以看下面的JS代码

这是我的JS，但是写到添加style属性就不会写了

var divMain = document.querySelector(".main");
//选择main 这个DIV

var windowHeight = window.innerHeight;
//用 window.innerHeight 获取浏览器窗口的高度
var htmlHeight = document.body.clientHeight;
//获取 html的高度

if(windowHeight>htmlHeight) { //判断html页面和浏览器窗口谁大
    var newDivMainHeight = windowHeight - (divMainMinHeight+140);
    //这是要设置的新的main高度

    divMain.setAttribute("height",newDivMainHeight);
   //设置main的高度，但是这个 方法的效果是这个样子的
   //<div class="header" height ="newDivMainHeight的值">
   //这个设置的不在style属性中，所以不会有作用
   //3正确的写法是什么样的？
  //我觉得也可以改样式表中的写法，我不会，但是是我在搜学，有很多问题，所以先来提问了。
}

1这样子可以实现，我更改浏览器窗口大小时，部局也随着响应吗？
（window.innerHeight）可以实时的获取浏览器窗口的值吗？
如何添加style属性？

javascript css html

阅读 4.7k

3 个回答

toBeTheLight

✓ 已被采纳

随时响应的话用window.addEventListener('resize',removeFoot,false);
按照我的理解来。你应该是没设置body的高度，而是由三部分大小撑开的；
取值上暂且认为
var htmlHeight = document.body.clientHeight;
//获取 html的高度
是对的，因为不清楚你的样式时怎么写的。

function removeFoot(){
    //高度判断以及修改main和footer的样式
    //其中
    //不要直接修改height属性，修改style，height作为style的内容
    divMain.setAttribute("style","height:"+newDivMainHeight+"px");
    }

因为在resize时才能触发removeFoot函数
所以在初始化的时候需要手动调用一次
removeFoot()

yzllee

2.9k1324

发布于
2017-01-03

更新于
2017-01-03

<!-- 父层 -->  
<div id="wapper">  
    <!-- 主要内容 -->  
    <div id="main-content">  
    </div>  
    <!-- 页脚 -->  
    <div id="footer">  
    </div>  
</div>

        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #wapper {
          height: auto;
        }

        #footer {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 60px;
        }

        #main-content {
            padding-bottom: 60px;
        }

这样子可以么？