html - 父 div 之外的扩展 div 内的内容未在移动设备中显示

Question

我使用以下 CSS 允许我在 wordpress 页面上的内容扩展到父 div 之外。它工作得很好，除非我在移动设备上查看网站。内容未根据浏览器的大小进行调整。关于解决此问题的任何建议？

.extended-content-container {
	width: 500%;
	margin-left: -200%;
	padding-top: 0;
	padding-bottom: 60px;
	background-color: #333;
}

.extended-content {
	width: 100%;
	height: 300px;
	text-align: center;
}

<div class="extended-content-container">
<div class="extended-content">
<span style="color: #ffffff;"><span style="color: #ffffff;">
</span></span>
<h2><span style="color: #fff;">HELLO THERE.</span></h2>
<span style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

</div>
</div>

Answer 1

你不应该使用

width: 500%;
margin-left: -200%;

这样做。由于您确实使用了它，因此内容完全按照您的指示执行，宽度是原来的 5 倍，并且向左移动的宽度是自身宽度的两倍。

如果你坚持在桌面上使用这些声明，而不是使用@media 查询和设置

width: 100%;
margin-left: 0;

更新

当您有带填充的全 Angular 父元素和必须为全 Angular 的子元素，并且您不能在子元素上使用绝对位置时，这就是解决方案之一；

左移child，增加child宽度，公式如下，假设x为父元素左右padding百分比之和

$child-width-in-percentage = 100 + (x/(100 - x) * 100)

$child-left-margin-in-percentage = x/(100 - x) * 100/-2

所以，在父 div 的例子中

.single-themes-page {
    padding: 0 10%;
}

child 得到以下风格:

.extended-content-container {
    width: 125%;
    margin-left: -12.5%;
}

如果您在@media 查询中有不同的父填充百分比值，请在这些@media 规则中根据上述公式更改子 (.extended-content-container) 宽度和边距左侧值。

这样您将拥有完全响应的浏览器窗口全宽子窗口。