Question

我有一个中心框，但当它的宽度或高度发生变化时，它的页眉，页脚，左侧边栏和右侧边栏都会相应地改变。

即使宽度或高度发生变化，中心框也应始终位于页面的中间位置。

这是我的代码：

<html lang="en">
 <head>

 <script src="jquery-1.10.1.min.js"></script>

 <script>

        var modified_width, modified_height;

        function set_width_height(width,height){

            var width_factor=width/1024;
            var height_factor=height/768;
            var scale_factor=(width_factor>height_factor)?width_factor: height_factor;

            modified_width=width*scale_factor;
            modified_height=height*scale_factor;

            return {width:modified_width, height:modified_height};
        }

        $(document).ready(function(){

             set_width_height(800,480)

    /*      var width2 = 1024 - modified_width;
            var height2 = 768 - modified_height;*/

            $("#id6").css({'width':modified_width, 'height':modified_height});


/*
            $("#id6").css("width",modified_width);
            $("#id6").css("height",modified_height);*/

        //  alert(modified_width)

            width1 = (1024 - modified_width)/2;
            height1 = (768 - modified_height)/2;

            $("#id2").css("width",width1);
            $("#id4").css("width",width1);

            $("#id3").css("height",height1);
            $("#id5").css("height",height1);





        })

 </script>

    <style>
    .inc {
        position:absolute;
        border:1px solid white; 
    }

        #id1{

            width:1024px;
            height:768px;



        }

        #id2{
            left:0;
            top:0;
            bottom:0;
            width:20%;
            height:100%;
            background:red;

        }
        #id3{
            top:0;
            left:20%;
            width:60%;
            height:15%;
            background:pink;

        }
        #id4{
            right:0;
            top:0;
            bottom:0;
            width:20%;
            background:green;
        }
        #id5{
            bottom:0;
            left:20%;
            height:15%;
            width:60%;
            background:yellow;
        }
        #id6{
            top:25%;            
            left:25%;
            width:60%;
            height:70%;         
            background:black;
        }






    </style>

 </head>
 <body>

    <div id="id1" class="mainc">



            <div id="id2" class="inc" >
B
            </div>

        <div id="id3"  class="inc" >
D
            </div>
            <div id="id4"  class="inc">
C
            </div>
            <div id="id5"  class="inc">
E
            </div>
            <div id="id6"  class="inc">
F
            </div>


    </div>

 </body>
</html>

Here is a fiddle

Div标签动态问题

0 个答案: