首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >改进代码以使div填充浏览器宽度

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

Stack Overflow用户
提问于 2015-03-10 22:22:06
回答 2查看 71关注 0票数 0

我设法创建了这段代码,使div.full_width_no_padding完全填满浏览器的宽度。它在桌面浏览器中运行良好,但在iphone、nexus等移动设备上不起作用。

有没有其他方法可以做到这一点?

js

代码语言:javascript
复制
(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

代码语言:javascript
复制
<div id="region-content" style="width:960px">
    <div class="full_width_no_padding" >content here</div>
</div>
EN

Stack Overflow用户

发布于 2015-03-10 22:35:36

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

1-删除该Javascript。

2-将这个添加到你的css中:

代码语言:javascript
复制
body,html{padding:0;margin:0;}

3-确保所有的父母都有width:100%

代码语言:javascript
复制
Generally, you can assume that _all_ block-level elements have (by default) `width:100%`.

4-利润!

票数 -3
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28966231

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档