css - DIV 背景图像在 2 列 CSS 设计中滚动后停止

Question

我用 CSS 制作了一个包含 2 列的模板，就像这张图片。

主要的 div 是 ma​​in。它内部有 2 次潜水。 DIV sider 有一个背景图片。我想一直展示它。现在，我有两个问题。首先，默认情况下它不会覆盖屏幕高度，除非我为它设置了 min-height=...。其次，如果我这样做，滚动页面后，背景图像将不会重复覆盖整个屏幕高度。

html {
    margin:0 0 0 0;
    height: 100%
}

body {
    font-family:Arial;
    font-size:9pt;
    color:#333333;
    line-height:200%;
    margin:0 0 0 0;
    background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
    width:100% !important;
    height: 100%
}

#main {
    width:100%;
    min-height: 100%
}

#sidebar {
    width:231px !important;
    float:left;
    background-image:url('../images/sidebar_bg.PNG');
    min-height: 100%;
}

#container {
    float:left;
    padding:25px 25px 25px 25px;
    width:70%;
    min-height: 100%
}

有什么问题？

编辑:这是我的背景图片

Answer 1

试试这个 - DEMO 1 : Unwanted white space

底部的额外空间是因为您的 padding:25px;(与 padding:25px 25px 25px 25px; 相同)。有一个额外的顶部填充 + 底部填充是给你的 div 额外的 50px。

如果您不想要额外的空间 - 试试这个 => DEMO 2 : without the white space

你可以复制 top 和 border 25px 的相同效果:

padding:0 25px;
margin:25px 0;

避免多余的不必要空间。

编辑:

额外的空间是由 margin:25px 0; 引起的，如果你删除它 - 你不会有额外的空间。检查这个 DEMO 3 Removing unwanted space caused by Margin

编辑 2:

您的问题是一个有据可查的问题 - 匹配列问题。您可以尝试多种解决方案，这里有一些:

1) javascript

2) Alter the Image (Hacky)

3) Pure CSS

我的最爱 => 选项 2

我还没有亲自探索最后一个，但试试看.. :)

希望对你有帮助..