改进代码以使div填充浏览器宽度
改进代码以使div填充浏览器宽度
提问于 2015-03-10 22:22:06
我设法创建了这段代码，使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
Stack Overflow用户
发布于 2015-03-10 22:34:37
您应该让这段代码在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/
Stack Overflow用户
发布于 2015-03-10 22:35:36
我将用非常简单的步骤解释这一点：
1-删除该Javascript。
2-将这个添加到你的css中：
body,html{padding:0;margin:0;}3-确保所有的父母都有width:100%。
Generally, you can assume that _all_ block-level elements have (by default) `width:100%`.4-利润！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28966231
复制相关文章
相似问题
腾讯云开发者
