0

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

我的模板

主 div 是main。它内部有 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%
}

有什么问题？

编辑：这是我的背景图片
在此处输入图像描述

4

1 回答 1

1

试试这个 -演示 1：不需要的空白

底部的额外空间是因为您的padding:25px;( 相同 padding:25px 25px 25px 25px;)。有一个额外的顶部填充 + 底部填充，它为您的 div 提供了额外的空间50px。

如果您不想要额外的空间 - 试试这个 => DEMO 2：没有空格

您可以使用以下方法复制顶部和边框 25px 的相同效果：

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

以避免多余的多余空间。

编辑：

额外的空间是由 造成的margin:25px 0;，如果你删除它 - 你不会有额外的空间。检查这个 DEMO 3 删除由 Margin 引起的不需要的空间

编辑 2：

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

1) javascript

2）改变图像（Hacky）

3）纯CSS

我的最爱 => 选项 2

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

希望能帮助到你..

于 2012-07-29T19:42:29.943 回答