页面布局问题

Question

请让我知道为什么在页面内容下面有很多空白，还有为什么水平滚动条被显示。将链接附加到下面的zip文件夹。解压缩并打开index.html。

link text

Answer 1

第一条线索：

规则div#content几乎适用于IE，并且在FireFox中增加了额外的宽度：

额外的宽度将应用于div类"content“

div#content { margin: 3px 3px 3px 188px; background: rgb(255, 255, 255) none 
    repeat; min-height: 392px; }

在div类"container“中

div#container { margin: auto; padding: 10px; background: rgb(255, 255, 255) 
   none repeat; position: relative; min-height: 400px; 
   max-width: 100%; min-width: 750px; }

水平滚动条是为添加到内容右侧的188px而显示的。当然，它们需要留下来:不要移除它们。

将 overflow: hidden**；添加到您的** div#container css规则

一般而言，您可能希望遵循"Progressive Enhancement with CSS"最佳实践，并将您的css规则分离到几个文件中(直到实际部署到生产环境中，您可以将所有css规则重新组合并压缩到一个紧密的文件中)。

Answer 2

VonC是对的。将overflow: hidden；添加到div#container规则。index.css的第274行。

Answer 3

对于滚动条，VonC的建议是正确的，而“页面内容下的大量空白”是由于您指定的'min-height‘。您可以使用属性"auto“来代替指定像素

关于：“当我添加overflow:auto时，它会在里面给出另一组滚动条。”..为此，将overflow:auto添加到您使用过的所有div中