Question

在我的网站中，有些页面的内容完全适合屏幕，有些页面具有滚动内容。所有页面都具有相同的html结构。

<body>
   <div id="header"></div>
   <div id="contentArea"></div>
   <div id="footer"></div>
</body>

#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}

#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}

#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}

当我移动到不同的页面时，在某些页面中，滚动条会因内容而显示，此时整个网页看起来像是向左移动了大约20px。

如何在滚动条出现时让<body>自行调整？

谢谢！

Answer 1

最简单的技巧是始终显示滚动条。这就是HTML5 Boilerplate的作用：

html {overflow-y：scroll; }

如果这不符合您的需求，您将不得不使用JavaScript。在页面加载时，检测，如果主体的高度大于窗口的高度，如果不是，请向左移动#header，#content和#footer，例如通过填充，或通过身体上的边缘。

但是，您没有简单的方法可以找出滚动条本身的宽度。这也需要通过Javascript进行检测。（基本上：创建一个元素 - ＆gt;使其内容滚动 - ＆gt;查看内容宽度如何变化。）

Answer 2

我相信你应该为BODY类指定WIDTH css属性：

body {
  width:100%;
}

Answer 3

<body style="height:100%; width:100%; overflow:auto;">
   <div id="header"></div>
   <div id="contentArea"></div>
   <div id="footer"></div>
</body>

这是一个jsfiddle链接：http://jsfiddle.net/NGWgz/2/

Answer 4

如果没有完全测试，我怀疑你看到这个的原因是因为你为页面正文中出现的各种元素定义了900px的绝对宽度。

当滚动条出现时，它会进入您的屏幕空间，因此内容会移动以保持其900px的宽度。我将转向更流畅的大小调整模型，或者至少将内容包装在某种容器中，以便滚动条不会干扰它。

Answer 5

我这样做的最简单方法是使用min-height和max-height属性，这样您就不必使用Overflow元素，因此内容不会移动

min-height：... px / em /％
max-height：... px / em /％

所以你会写下你的案子：

min-height：您想要的原始高度，以像素为单位，百分比或ems;
max-height：auto;

通过这种方式，您放入盒子/包装器/ div中的内容并不重要，它会使页面高度更大，而不必在每次向页面添加内容时更改页面高度。
您对width也有相同的属性，但我没有尝试过。

我的消息来源：
1 - 我正在制作一个网页，并在SB
上学习软件工程 2 - http://www.w3schools.com/cssref/pr_dim_max-height.asp

PS：我知道这已经解决了，但我认为当他们在他们的网页上工作时，这可能对其他人有用。

如何使用body标签调整滚动条？

5 个答案: