Question

我在使用此代码时遇到了一些问题。我想也许你可以帮助我。

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

第一个问题：在开始我设置身体'左'和'右'属性（window_width - 1100 = 180）所以我的身体宽度是920px。事情是不是。 变成904 。我用铬和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>

Answer 1

重置浏览器样式：

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

缺少像素和调整jquery大小时，body停止居中

1 个答案: