0

我在我的网站上使用全角背景,它在 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% 的可见宽度。我已经尝试了很多事情,但我总是遇到扩展视图以便用户可以水平滚动的问题,这是我想避免的。

任何帮助深表感谢!

马丁

4

1 回答 1

0

您是指底部带有“强大、简单、经济实惠”等的块吗?

在不更改 HTML 的情况下没有简单的方法可以做到这一点,除非您在width: 120%这些行中添加 a 或其他内容以强制块溢出容器,但这会导致您提到的水平滚动。

一个更简单的方法是,如果您将块从常规容器中取出,并为其使用新的 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-03T01:32:56.743 回答