爱悠闲 > 三段式高度自适应页面布局

三段式高度自适应页面布局

分类: 开发知识  |  作者: zhangjie617 相关  |  发布日期 : 2016-06-01  |  热度 : 76°
<!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>