页面布局问题答案

【问题标题】：Page Layout Issues页面布局问题
【发布时间】：2010-09-26 04:54:36
【问题描述】：

请告诉我为什么页面内容下方有很多空白以及为什么显示水平滚动条。下面附上 zip 文件夹的链接。解压并打开 index.html。
link text

【问题讨论】：

为什么不直接将页面“按原样”放置，这样我们就可以浏览到一个链接来查看它？在本地拥有它并没有太多优势......如果我们需要它，我们总是可以抓住它。
下载后，我发现里面还有很多不必要的东西。带有单个 CSS 文件的单个 HTML 文件会更有用。
只需添加一个新修复：只需添加溢出：隐藏；到您的 div#container css 规则并告诉我这是否更好

标签： html css layout

【解决方案1】：

对于滚动条，VonC 的建议是正确的，而“页面内容下方的大量空白”是由于：您指定的“最小高度”。您可以为此使用属性“auto”而不是指定像素

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

【讨论】：

溢出：隐藏也修复了“页面内容下方有大量空白”问题

【解决方案2】：

第一个线索：

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 规则重新组合并压缩成一个紧密的文件）

【讨论】：

添加了 188px 以便为左侧块留出空间。如果我删除，则内容会推送到左侧块中。
当我添加溢出时：auto;它在里面提供了另一组滚动条。
和溢出：自动；添加到内容和容器 div 中，你会得到什么？即使仍然有滚动条，与当前情况相比，您是否看到很少的额外空间？
没有。现在可以在内卷轴内看到空间。

【解决方案3】：

VonC 是对的。添加溢出：隐藏；到 div#container 规则。 index.css 的第 274 行。

【讨论】：