css - 正文宽度小于内容宽度

Question

我遇到了宽度问题，这很奇怪。请check out this fiddle自己测试一下。

<div class="topbar" style="width:100%; background:#000; color:#fff">
    <div class="container" style="width:970px; margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere semper velit, quis gravida dui elementum posuere. Aliquam hendrerit sagittis sapien elementum lacinia. Praesent sagittis, magna sed molestie suscipit, dolor ante pharetra neque, a ornare lorem arcu eget mauris. Donec ornare cursus velit vel mattis. Donec malesuada euismod metus ac posuere. Sed vulputate tortor ac lorem ultrices, eget scelerisque neque tincidunt.....</div>
</div>

问题是当内容比窗口宽度宽时，主体获取的是窗口的宽度而不是内容的宽度。

看看下面的屏幕截图。 窗口宽度为 787px，内容宽度为 970px。您可以看到出现了scroll-x 的滚动条。

但是看看当我向右滚动时会发生什么 Body 不会扩展到可用宽度的 100%，但会获取窗口的宽度。

您知道为什么会发生这种情况吗？

Answer 1

将 display:table 添加到您的正文中。这样它就会根据子内容扩展其区域。

body{display:table;}

DEMO