div+css搭建系统页面框架

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <style type="text/css">
            *
            {
                margin:0;
                padding:0;
            }

            #mainTop
            {
                height:90px;
                overflow:hidden;
            }

            #bottomLeft
            {
                height:100%;
                width:15%;
                 float:left;
                overflow:hidden;
                position:relative;
            }

            #bottomRight
            {
                height:100%;
                width:85%;
                 float:left;
                overflow:hidden;
            }

            #split
            {
                width:10px;
                height:100%;
                background:black;
                position:absolute;
                right:0;
                top:0;
            }

            #leftContent
            {
                height:100%;        
                overflow:auto;
                margin-right:10px;   /*  宽度和split的宽度一致  */
            }

            #rightContent
            {
                height:100%:
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <div>
            <div id="mainTop">c</div>
            <div id="mainBottom">
                <div id="bottomLeft">
                    <div id="split"></div>
                    <div id="leftContent">
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabe
                    </div>
                </div>
                <!-- 为什么在bottomRight还套一个rightContent:当对bottomRight设置margin或padding会将它占的位置加上
                margin或padding的宽度,导致溢出。在里面再套一个rightContent,让rightContent的宽度自动,当设置rightContent的margin或padding时,它占的整体位置不变,会将内容的宽度自动变小,
                margin或padding的宽度+width=rightContent的宽度
                -->
                <div id="bottomRight">
                    <div id="rightContent">b</div>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
    </body>

    <script type="text/javascript">            
         var docHeight = document.documentElement.clientHeight;
         var mainBottom = document.getElementById("mainBottom");

         //  90:是mainTop的高度
        mainBottom.style.height = (docHeight - 90).toString() + "px";

        document.getElementById("bottomLeft").onscroll =  function()    {
            document.getElementById("split").style.position = "absolute";
            document.getElementById("split").style.right = "2px";
        };
    </script>
</html>

你可能感兴趣的:(div+css搭建系统页面框架)