改进代码以使div填充浏览器宽度

时间:2015-03-10 14:22:06

标签: jquery html css

我设法创建此代码以使div.full_width_no_padding完全填充浏览器的宽度。它在桌面浏览器中运行良好,但在iphone,nexus等移动设备中无效。

还有其他办法吗?

JS

(function ($) {
   $(document).ready(function() {

    $(".full_width_no_padding").width($(window).width());
    var marginLeft = ($(window).width() - $('#region-content').width()) / 2;
    $(".full_width_no_padding").css( "margin-left", -marginLeft );

    $(window).on('resize', function(){
        $(".full_width_no_padding").width($(window).width());
        var marginLeft = ($(window).width() - $('#region-content').width()) / 2;
        $(".full_width_no_padding").css( "margin-left", -marginLeft );
    });

   });   
}(jQuery));

HTML

<div id="region-content" style="width:960px">
    <div class="full_width_no_padding" >content here</div>
</div>

2 个答案:

答案 0 :(得分:0)

你应该在DOM准备就绪后执行此代码,如果不这样做,代码可能在DOM准备好之前执行,然后由于代码无法找到元素而不会应用更改在DOM中。

在jQuery中很容易,你只需将代码包装在$(function() { <code here> });块中,这样你就可以得到:

$(function() {

    $(".full_width_no_padding").width($(window).width());
    var marginLeft = ($(window).width() - $('#region-content').width()) / 2;
    $(".full_width_no_padding").css( "margin-left", -marginLeft );
    $(window).on('resize', function(){
        $(".full_width_no_padding").width($(window).width());
        var marginLeft = ($(window).width() - $('#region-content').width()) / 2;
        $(".full_width_no_padding").css( "margin-left", -marginLeft);
    });

});

有关详细信息,请参阅:https://api.jquery.com/ready/

答案 1 :(得分:-3)

我将通过非常简单的步骤解释这一点:

1-删除Javascript。

2-将此添加到您的css:

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

3-确保所有父母都width:100%    通常,您可以假设所有块级元素都具有(默认情况下)width:100%

4-利润!