如何在手机上获得全宽背景？

我在我的网站上使用全宽背景，在div容器外扩展，参见http://www.csselectronics.com/（接近尾声）。如何在手机上获得全宽背景？

这在桌面上运行良好，虽然我很难在手机上复制效果。我使用两种不同的CSS样式，通过基于屏幕宽度的设置加载：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Mobile_v17.css"> 

<link rel="stylesheet" media="screen and (min-width: 601px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Big.css">

问题出在移动版本上;正如您在移动设备上查看页面所看到的那样，背景颜色不会伸展到容器外部以覆盖可见宽度的100％。我尝试了很多东西，但是我总是遇到扩展视图的问题，以便用户可以水平滚动，这是我想避免的。

任何帮助非常感谢！

马丁

来源

2017-07-02 Martin

你的意思与“功能强大，操作简单，经济实惠”等底部块？

没有简单的方法可以在不改变HTML的情况下做到这一点，除非沿着这些线添加width: 120%或其他东西来强制块溢出容器，但会导致水平滚动。

如果您将块从常规容器中取出，并为其使用新的HTML块，则更容易的方法是。

因此这将是，（例如粗糙）

<div class="container> 
// Your regular content here 
</div> 

//In this grey block, make it width 100% and add the content you want 
<div class="grey-block"> 
//So the content inside will still be aligned with the rest of the page 
<div class="container"> 
</div> 
</div> 

//Continue with the rest of the page 
<div class="container> 
</div>

来源

2017-07-03 01:32:56

感谢您的答复 - 我想这样做，但不幸的是我在E-COM平台上工作，其中选择该级别是无法使用。即我被迫在已经实施的基本的div容器中工作。我不确定在这种情况下是否有任何可以完成的事情？ – Martin

e-com平台是否允许添加Javascript/jQuery代码？如果是这样，你可以分开块，并与DOM玩，重新加入。 –

如何在手机上获得全宽背景？

回答

相关问题