Question

http://www.coffeeproteindrink.com/method-athlete/

我正在尝试删除主包装器下面的空白区域，在Firefox中它显示大约20px的开放区域，主页面上有一个垂直滚动条以便查看它。

在IE中有一个可见的115px区域，没有滚动条。

我的目标是让main_wrap +页脚与页面底部齐平，但我正在尝试的任何内容似乎都没有帮助。

#main_wrap {height: 390px;
background: url(images/content_back.png) repeat-y top left; 
margin: 0 0 0 240px;
opacity: .8;
position:absolute;
top:325px;
overflow: hidden;
}

#main
{position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 12px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}

#footer
{ 
width: 680px;
padding: 25px 40px 0 0px;
font-size: 12px;
position: relative;
height: auto;
clear: both;
bottom:50px;}

我想要完成的例子：http://www.bio-genix.com/

感谢您的帮助，肯

Answer 1

原来你不需要粘页脚技术，因为你的背景图像伸展到屏幕上，这意味着你可以使用height: 100%并且它可靠地设置为全高。

所以，看到这一点，bottom: 0将适用于#main_wrap。下一个难题是底部边缘的幻影60px左右来自哪里;最后，在调整之后，确定overflow: hidden将隐藏由#main_wrap元素内的边距和填充所产生的额外高度。

这就是最终的工作（h2部分修复了一个问题）：

#main_wrap {
    position: absolute;
    height: 390px;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
#main {
    padding-bottom: 0;
}
#main_wrap #main h2.section_title {
    margin: 20px 0 40px
}

http://jfcoder.com/test/methodsite.html

删除填充或边距的问题

1 个答案: