Question

我设法创建此代码以使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>

Answer 1

你应该在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/

Answer 2

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

1-删除Javascript。

2-将此添加到您的css：

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

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

4-利润！

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

2 个答案: