三段式高度自适应页面布局
2016-03-25 18:30
375 查看
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="fe-lib/jquery/1.11.2/jquery.min.js"></script> <style type="text/css"> html,body{ height:100%; padding:0; margin: 0; background: gray; } .pageContainer{ min-height: 100px; width: 1000px; margin: 0 auto; } .pageHeader{ height: 100px; width: 100%; background: blue; } .pageMain{ background: red; } .pageMain p{ margin: 0; padding: 0; } .pageFooter{ background: green; height: 100px; width: 100%; } .fixScreenBottom{ position: fixed; bottom: 0; } .fixScreenTop{ position: fixed; top: 0; } </style> <script type="text/javascript"> $(function(){ $(window).on("resize",pageMainResize); pageMainResize(); function pageMainResize(){ var totalHeight = $(window).height(), headerHeight = $(".pageHeader").height(), footerHeight = $(".pageFooter").height(); //清除前次设置.pageMain的高度 $(".pageMain").css("height",""); var mainHeight = $(".pageMain").height(), isFull = (totalHeight <= (headerHeight + footerHeight + mainHeight)); if(!isFull){ $(".pageMain").height(totalHeight - headerHeight - footerHeight); } } }); </script> </head> <body> <div class="pageContainer"> <div class="pageHeader fixScreenTop"></div> <div class="pageMain"> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p><!-- <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p> <p>sldfjgldfg</p>--> </div> <div class="pageFooter fixScreenBottom"></div> </div> </body> </html>
相关文章推荐
- 夹角有多大2 航电2080
- Doxygen资源链接
- Java字符串的不可变性
- ok6410按键中断编程,linux按键裸机
- Android官方开发文档Training系列课程中文版:使用Fragment构建动态UI之Fragment创建
- JavaEE POI读取 Excel中的数据,(Excel2003(xls), Excel2007(xlsx))
- java牛逼博客
- linux下的文件权限命令详解
- asp.net webform灵异的错误
- Hash分析
- Makefile定义工程中的宏
- 使用nexus搭建maven私服、手动更新索引
- swift学习笔记之自定义UITableViewCell
- 40个Java多线程问题总结
- hibernate 的注意事项
- sphinx
- 《HiWind企业快速开发框架实战》(1)框架的工作原理
- Requirements 101: User Stories vs. Use Cases
- MediaPlayer和SeekBar配合起来
- 基于微信的域名交易系统(功能细节敲定)