Question

CSS

    #wrapper {
        min-width: 800px;
        max-width: 1000px;
        height: 100%;
        margin: 0 auto;
        text-align: left;
    }
    #wrap-left {
        height: 100%;
        position: relative;
        float: left;
        width: 20px;
        background: #FFF url('img/bodybg_left.jpg') repeat-y left;
    }
    #wrap-right {
        height: 100%;
        position: relative;
        float: right;
        width: 20px;
        background: #FFF url('img/bodybg_right.jpg') repeat-y right;
    }

HTML

<div id="wrapper">
  <div id="wrap-left"><!-- LEFT BACKGROUND //--></div>
  <div id="wrap-right"><!-- RIGHT BACKGROUND //--></div>
  <table id="content">
     ...
  </table>
  <div style="clear: both;"></div>
</div>

左右背景完全显示在初始视口上，但当表格大于视口（高度> 100％）并向下滚动时，背景将不会显示在初始视口下方。有可能用css解决这个问题，还是我需要使用html表？我试图将背景div的位置设置为fixed，但是我需要将它们相对于具有动态宽度的包装器进行定位。

此致本

解决方案，请使用此功能或查看以下答案！

CSS

    #wrapper {
        min-width: 800px;
        max-width: 1000px;
        min-height: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: left;
        background: url('img/bodybg_left.jpg') repeat-y left;
    }
    #wrap-left {
        background: url('img/bodybg_left.jpg') repeat-y left;
        min-height: 100%;
    }
    #wrap-right {
        background: url('img/bodybg_right.jpg') repeat-y right;
        min-height: 100%;
    }
    #content {
        width: auto;
        margin: 0 20px;
        border-collapse: collapse;
        border-top: 1px solid #000;
        min-height: 100%;
    }

HTML

<div id="wrapper">
  <div id="wrap-right"><div id="wrap-left">
    <table id="content">
      ...
    </table>
  </div></div>
</div>

Answer 1

我的第一个答案很匆忙，根本没用。

这一次，我实际上尝试了两个background-image。

Live Demo（edit）

<强> CSS：

html, body {
    margin:0; padding:0; border:0;
    height: 100%
}
#wrapper {
    min-width: 800px;
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    position: relative
}
#wrap-left, #wrap-right {
    position: absolute;
    width: 100%;
    height: 100%;
}
#wrap-left {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/250px-Color_icon_blue.svg.png') repeat-y top left
}
#wrap-right {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/250px-Color_icon_red.svg.png') repeat-y top right
}
#content {
    position: relative
}

<强> HTML：

<div id="wrapper">
    <div id="wrap-left"></div><div id="wrap-right"></div>
    <table id="content">
        <tr><td>fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />
        <!--fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg-->
        </td></tr>
    </table>
</div>

CSS向左和向右滚动背景

1 个答案: