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;

的更新

如果你有带填充的全宽父元素和子元素必须是全宽，并且你不能在子元素上使用绝对位置，那么这就是解决方案之一;

将子项向左移动，并使用以下公式增加子宽度，假设 x 是父元素左右填充百分比的总和

$ 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%; }

孩子得到以下风格：

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

如果在@media查询中有不同的父填充百分比值，请在这些@media规则中更改上述公式的子（.extended-content-container）宽度和margin-left值。

通过这种方式，您将拥有完全响应的浏览器窗口全宽度子项。

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

1 个答案: