Question

html {
background-color: #e2e2e2;
margin: 0;
padding: 0;   
white-space:nowrap;

}

body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;       
}

#body {
min-width:1015px;  
background-color: #efeeef;
padding-bottom: 35px;       
position: relative;
display: inline-block;
vertical-align: top;
}

我在上面的一页中有css。 #body用于使用ajax通过部分视图填充的div。

问题是当#body中的内容溢出到右边时，body不会封装#body的内容，它在加载时会保持窗口的大小。因此，当水平滚动时，滚动时变为可见的区域中的身体部位的背景看起来不同。

当＃body owerflows向右移动时，如何让身体继续看起来一样？

http://jsfiddle.net/q2j4wcmo/

更新

Hashem Qolami确实解决了我的部分问题，当放大#body中的内容时，身体仍然包含#body，它看起来应该如此。但在我的解决方案中加载页面时，＃body中的内容溢出正文并未将内容封装在#body中。

任何想法在jsfiddler中运行时可能有什么不同，它显然正常工作？

更新2： 新例子

http://jsfiddle.net/q2j4wcmo/10/

Answer 1

一个选项是将<body>的显示类型更改为inline-block，让其内容水平增长。

此外，您可以使用min-width: 100%;确保<body>始终填充整个页面，即使其内容不是那么广：

<强> EXAMPLE HERE

html {
    white-space:nowrap;
    width: 100%;
}

body {
    display: inline-block;
    min-width: 100%;
}

注意：由于min-width的百分比值是指包含块的宽度，因此您必须指定显式宽度<html>元素（因为我所做的那样）。

当div内部溢出到右边时，如何让身体继续看起来相同？

1 个答案: