Javascript 像素缺失&；调整jquery的大小时主体停止居中_Javascript_Jquery

Javascript 像素缺失&；调整jquery的大小时主体停止居中

javascript jquery

Javascript 像素缺失&；调整jquery的大小时主体停止居中,javascript,jquery,Javascript,Jquery,我在使用这段代码时遇到了一些问题。我想也许你能帮我首先，我的部分没有填充和边框，因此像素仅用于顶部、左侧、右侧和宽度属性而且不需要使用外径（）第一个问题：在开始时，我将body“left”和“right”属性设置为（window_width-1100=180），这样我的body宽度是920px。问题是它不是现在变成904。我已经用chrome和mozilla测试过了。我不知道丢失的16个像素在哪里。第二：我希望我的身体在调整窗口大小时居中，我的边距增长得更少，直到身体占据整个空

我在使用这段代码时遇到了一些问题。我想也许你能帮我

首先，我的部分没有填充和边框，因此像素仅用于顶部、左侧、右侧和宽度属性而且不需要使用外径（）

第一个问题：在开始时，我将body“left”和“right”属性设置为（window_width-1100=180），这样我的body宽度是920px。问题是它不是现在变成904。我已经用chrome和mozilla测试过了。 我不知道丢失的16个像素在哪里。

第二：我希望我的身体在调整窗口大小时居中，我的边距增长得更少，直到身体占据整个空间窗户

我的身体没有保持居中，而且只有一个边缘变小了。

我发现这是因为“#content”和“#mainContent”、“aside”有一个宽度。我有点需要设定宽度。有没有什么方法可以让我的窗口中心本身使用jquery并完成上面的所有工作

这是我的密码：

<html>
    <head>          
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     
        <style>
            body{
                position:absolute;          
            }
            #content{
                background-color: green;
            }
            #mainContent{
                background-color: orange; 
            }
            aside{
                background-color: blue;
            }
            .floatLeft{
                float:left;
            }
            .clear{
                clear:both;
            }
        </style>
    </head>
    <body>      
        <section id="content" class="border">
            <section id="mainContent" class="floatLeft" >   
                mainContent
            </section>                      
            <!-- End of main content -->

            <aside class="floatLeft">                               
                aside                   
            </aside>
            <!-- End of aside -->

            <p class="clear"></p>

        </section>
        <!-- End of content -->

        <script type="text/javascript">
            $(document).ready(function(){               
                change_template();
            });
            change_template = function(){

                var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;        

                window_h = $(window).height();
                window_w = $(window).width();

                top = window_h - (window_h - 100);
                left_right = window_w - 1100;

                content_w = window_w - 2*left_right;                
                $('#content').css('width', content_w);

                mcontent_w = content_w - 300;
                $('#mainContent').css('width', mcontent_w);

                aside_w = content_w - mcontent_w;
                $('aside').css('width', aside_w);               

                resize_body(top, left_right, left_right);

                //next three lines are written only for demonstration purpose
                left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                alert('body width: '+$('body').css('width'));//it supposed to be 920
                alert('left propery value: '+left_right);//it supposed to be 180

                $(window).resize(function(){
                    left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                    resize_body(top, left_right, left_right);
                });

            }

            resize_body = function(top, left, right){

                $('body').css('top', top+'px');
                $('body').css('left', left+'px');
                $('body').css('right', right+'px');

            }
        </script>               
    </body>
</html>


身体{
位置：绝对位置；
}
#内容{
背景颜色：绿色；
}
#主要内容{
背景颜色：橙色；
}
旁白{
背景颜色：蓝色；
}
.左{
浮动：左；
}
.清楚{
明确：两者皆有；
}
主要内容
在一边

$（文档）.ready（函数（）{
更改_模板（）；
});
更改模板=函数（）{
变量窗口，窗口，顶部，左侧，右侧，内容，内容，侧边；
window_h=$（window）.height（）；
window_w=$（window.width（）；
顶部=窗高-（窗高-100）；
左\右=窗口\ w-1100；
内容w=窗口w-2*左/右；
$（'content'）.css（'width'，content'u w）；
mcontent_w=含量_w-300；
$（'mainContent'）.css（'width'，mcontent_w）；
旁白=内容-内容；
$（'aside'）.css（'width'，aside_w）；
调整主体的大小（顶部、左侧、右侧）；
//接下来的三行仅用于演示目的
left_right=（$（window.width（）-parseInt（$（'body'）.css（'width'））/2；
警报（'body width:'+$（'body'）.css（'width'））；//应该是920
警报（'left property value:'+left_right）；//应该是180
$（窗口）。调整大小（函数（）{
left_right=（$（window.width（）-parseInt（$（'body'）.css（'width'））/2；
调整主体的大小（顶部、左侧、右侧）；
});
}
调整大小\主体=功能（顶部、左侧、右侧）{
$（'body'）.css（'top'，top+'px'）；
$（'body'）.css（'left'，left+'px'）；
$（'body'）.css（'right'，right+'px'）；
}

重置浏览器样式：

html, body {
  margin: 0 auto;
  padding: 0;
}

@谢谢。你避免了很多头痛。你知道在设定宽度时如何使身体居中吗？