Question

我的网站上有两个边框，左边和右边...大约15x15的小图像在网站上重复...当设置100％像下面一样，边框只有“一个屏幕”向下（这是100％）。但我的网站是动态的，内容也在变化......我希望边框随着页面的总高度而变化...... 我怎么能这样做？

这是css：

.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
height: 100%;
width: 30px;
right: 0px;
background-color: #E7F5F0;
    }

这是HTML DIV：

    <div class="bgr_right"></div>

另外，位置：绝对是正确的东西吗？

更新：在阅读回复后，我认为必须有更好的方法...... 如何使用javascipt ... 有没有人知道是否有办法，用javascript，获得身体的高度？然后：

     <div height="javascript_function()" or something...

???

再次感谢

Answer 1

另外我建议在内容容器周围再包含两个div，然后重复背景，将它对齐到左边的一个div中，另一个右边对齐。即：

<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;">
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;">

  <div id="content">hello world</div>

</div>
</div>

然后如果你想让它高度100％将CSS，body和内容容器设置为100％高度，如下所示：

html，body，＃content {height：100％; }

希望这会有所帮助：）

Answer 2

冒着愤怒的评论和声誉损失的风险 - 使用表格来包含您的布局。您可以自由获得全高边框 - 它们会自动调整到与内容相同的高度。

<table>
  <tr>
    <td class="bgr_left"></td>
    <td class="content"></td>
    <td class="bgr_right"></td>
  </tr>
</table>

Answer 3

如果您使用固定宽度设计，则可以在主体或内容容器上使用一个背景图像，具体取决于您想要的效果。这张图片就像是：

(left bar)-> | ([x]px space here) | <-(right bar)

使用repeat-y，这会给你：

|                |
|                |
|                |
|  content here  |
|                |
|                |
|                |

然后条形图将与您的内容一样高。如果将其应用于<body>，那么它将具有身体的高度。

希望这有帮助。

Answer 4

似乎没有理由为背景使用单独的div，因为它是空的，但它取决于列宽是否固定。

你应该将背景图像应用到你想拥有背景的div，这样你可以确保它会随着div的增长而继续下面。

如果你的列宽是固定的，那么你可以只是左右组合将在非常宽的图像中的图像只能垂直重复。
如果您的列宽可变，你可以有例如左边在不断增长的div和背景中正确的一个在包装div上包含不断增长的div。

使用正确的填充，您将获得所需的效果。

侧边框和动态内容有帮助

4 个答案: