页面布局问题

时间:2008-12-10 07:58:16

标签: html css layout

请让我知道为什么页面内容下方有很多空白区域以及为什么会显示水平滚动条。将链接附加到下面的zip文件夹。解压缩并打开index.html link text

3 个答案:

答案 0 :(得分: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规则压缩到一个紧张的文件)

答案 1 :(得分:0)

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

答案 2 :(得分:0)

对于滚动条,VonC建议的是正确的,而“页面内容下方的大量空白区域”是由于:您指定的“最小高度”。您可以使用属性“auto”代替指定像素

关于:“当我添加overflow:auto;它会在内部提供另一组滚动条。”..为此添加溢出:自动添加到您使用的所有div