侧边框和动态内容帮助答案

【问题标题】：Side border and dynamic content help侧边框和动态内容帮助
【发布时间】：2012-05-17 22:46:45
【问题描述】：

我的网站上有两侧边框，左侧和右侧...大约 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>

另外， position: absolute 是正确的吗？

更新：看完回复后，我认为必须有更好的方法...... 如何使用 javascipt... 有谁知道是否有办法使用 javascript 获取身体的高度？那么：

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

???

再次感谢

【问题讨论】：

标签： javascript html css

【解决方案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 中将 html、正文和内容容器设置为 100% 的高度：

html, 正文, #content { 高度：100%; }

希望这会有所帮助:)

【讨论】：

【解决方案2】：

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

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

【讨论】：

真的没有必要在你的标记中使用空元素来获得背景； table、div 或任何其他元素。当然总有例外，但这是一个非常简单的布局......
@Jeroen，对你的评论投了赞成票，我已经考虑过了。我不认为他建议使用 empty 元素，他只是在演示标记结构，而没有在表格单元格中添加  类型填充。 ...话虽如此，我不同意将表格用于布局目的，无论它看起来多么容易。
@ricebowl，列的类名表明它们仅用于背景。我同意不使用表格的部分，根据我的经验，使用 div/css 可以更轻松、更灵活地完成所有工作，但我的评论不仅仅适用于表格，OP 使用的额外 div 也是多余的。

【解决方案3】：

如果您有一个固定宽度的设计，您可以只使用一张背景图片，可以在正文或内容容器上，具体取决于您想要的效果。该图像类似于：

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

使用repeat-y，这会给你：

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

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

希望这会有所帮助。

【讨论】：

【解决方案4】：

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

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

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

使用正确的填充，你会得到你想要的效果。

【讨论】：