CSS左右滚动背景

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;
    }

    #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-left"><!-- LEFT BACKGROUND //--></div>
  <div id="wrap-right"><!-- RIGHT BACKGROUND //--></div>
  <table id="content">
     ...
  </table>
  <div style="clear: both;"></div>
</div>

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

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>

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

...

我的第一个答案很仓促，根本不起作用

这一次，我用了两张背景图片，真的试过了

（）

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
}

<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>

HTML:

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
}

<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>

fdgdg
fdgdg
fdgdg
fdgdg
fdgdg
fdgdg
fdgdg
fdgdg
fdgdg

好的，三十点。。这对第二次包裹非常有效，在本例中是正确的。但另一个如下所示..你尝试了我的答案的哪一部分？希望他们两个都不是！就你的，明白了#第二个包裹的FFF覆盖了第一个包裹。我刚离开#FFF，但第二个包裹现在与表格内容一样高，而另一个包裹显示为全高。我不知道为什么，但第二个包裹没有其父包裹高，而是与其子包裹（表格）一样高。我将表格高度设置为100%，但由于其父div（第二次换行）作为表格的内容并不更高，因此表格不会作为其100%的内容更高。奇怪的行为。。我刚刚在我的第一篇文章中补充了我到目前为止所得到的。这个表格使得它很难修复。你有没有可能摆脱它？95%的布局可以在不使用它们的情况下很好地完成。