内容宽度超过身体宽度？

下面是一个非常简化的示例：http://jsfiddle.net/guard/MmcEY/3/ 在这里人为地拒绝了身体宽度，但实际应用并不是这样 - 请参阅下文。内容宽度超过身体宽度？

有多个块布局类似于＃d1和＃d2。他们都有最小宽度的设置。屏幕底部还有一个条纹，必须填满整个宽度。

在宽屏幕上一切正常 - 有足够的身体宽度适合块，没有滚动和条纹填充整个屏幕宽度。

但是在窄屏幕上（在示例中模拟身体宽度明确设置），会发生以下情况：内容的宽度实际上比身体宽度多。该内容使水平滚动显示，尽管它没有拉伸身体。因此，条纹（底部的绿线）占用的空间少于页面内容。

=====

好，太好了，伙计们，我知道这是因为利润率的:)。

正如我所说，固定的身体宽度在这里仅供演示，在现实世界中，身体宽度由窗口大小定义。但几块仍然在身体的外面，所以滚动出现，而身体宽度不变。

那么，有没有什么办法使条纹填充整个窗口客户端宽度，同时保留其余的标记？

我正在使用现有的网站，并不希望完全重新黑客整个布局（相当复杂，而不是由我编码）。

来源

2011-08-23 Guard

你能给一个网站的链接，然后请？它可以帮助人们看到这一点。 –

我试图用最小的例子省略它。我应该创建一个更好的，我 – Guard

这是因为你的#d2元件具有负margin-right集 - 这意味着它会落在body元素之外。如果您删除此属性，那么您会看到该块落到下一行（因为#d1和#d2都是150px）。

本质上，布局正在做你说的要做的事情。无论浏览器窗口大小如何，条纹始终为宽度（100％的身体宽度）200px。

来源

2011-08-23 10:32:16

请参阅upd，请 – Guard

这是因为第二个div的-200px的边缘。这使得浏览器认为它的宽度是-50px，所以它会使这些div彼此相邻，即使这些内容的一部分呈现在主体之外。

所以：失去了保证金。 :)

来源

2011-08-23 10:31:48 GolezTrol

见upd，请 – Guard

我看到你的更新，但我不知道它是如何改变答案。 150px的最小宽度受到尊重，这意味着如果主体宽度缩小到300px以下，则第二个div将包装到下面。但这是保证它无法工作的缘故。此外，如果您的身体有任何边距或填充，将条宽设置为100％将导致其大于身体的客户大小。它将增长到全幅，包括这些边际。如果您想要填充身体客户端宽度，则应该跳过条纹宽度。默认情况下，它将填满空间。 – GolezTrol

你可以在身体上设置最小宽度为300px，以防止它变小。但我不完全确定你想要它的样子。你想让条纹服从300px的最小宽度，还是你想要div2低于div1时，他们不适合彼此相邻？ – GolezTrol

内容宽度超过身体宽度？

回答

相关问题