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>

问题是当内容宽度超过窗口宽度时，正文会获得窗口的宽度，而不是内容的宽度。

看一下下面的截图。 enter image description here 窗口宽度为787px，内容宽度为970px。您可以看到滚动条出现在scroll-x上。

但是看看当我向右滚动时会发生什么 enter image description here 身体不会扩展到可用宽度的100％，但会获得窗口的宽度。

你知道为什么会这样吗？

Answer 1

将display:table添加到您的身体。因此它将根据子内容扩展其区域。

body{display:table;}

DEMO

Answer 2

将min-width: width:970px添加到正文中。这是一个标准的警告。如果有fixed-width容器，请确保将width value容器的fixed-width添加为正文min-width。

Answer 3

问题在于父<div>。您已为其分配了width: 100%，它基本上是窗口的宽度。查看更新后的Fiddle。

<div class="container" style="width:970px; margin:0 auto;">...</div>

或者您可以更改.topbar：Fiddle

的样式

<div class="topbar" style="width:970px; background:#000; color:#fff">
    <div class="container" style="margin:0 auto;">...</div>
</div>

Answer 4

<强> Demo

将min-width: 970px;添加到<body>（等于您的内容宽度）

这将确保<body>的最小宽度为970像素，并且您的屏幕尺寸大于970px，它将占据整个宽度，因为设置width: 100%表示正文占据整个浏览器宽度。

体宽小于内容宽度

4 个答案: