码迷,mamicode.com
首页 > Web开发 > 详细

js设置3个div垂直铺满界面(头+内容+底部)

时间:2018-05-01 12:34:20      阅读:554      评论:0      收藏:0      [点我收藏+]

标签:client   最小   --   .com   加载   inf   fun   back   com   

一.需求:3个div垂直布局

  技术分享图片

 

二:解决思路

  1.给header和footer设置固定的高度,并且在文档加载的时候就设置

  

 $("#header").height(100);
 $("#footer").height(200);

  2.设置container的高度

function rePageSize(){
    var Height = document.documentElement.clientHeight;
    $("#header").height(100);
    $("#footer").height(200);
    //设置最小高度
    if($("#container").height() < (Height-100-200)){
        $("#container").height(Height-100-200);
    }
}

需要注意的是:要给div设置宽度哈。

  3.当浏览器大小改变时,重复第二步

window.onresize = rePageSize;

这种方法是自己想出来的,应该会有更好的方法(不导入其他框架的情况下----jquery除外),望告知

 

js设置3个div垂直铺满界面(头+内容+底部)

标签:client   最小   --   .com   加载   inf   fun   back   com   

原文地址:https://www.cnblogs.com/dengyongkang/p/8975725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!