html - 在边框上继续沿动态页面一直向下移动？

有一个边框bgr_left.jpg，我想继续沿页面的y轴向下移动...

bgr_left.jpg是30px x 30px，并且已将其放置在div标签中。此外，我还希望右侧具有相同的边框，一直到顶部都具有相同的边框...

我不能做到这一点，这是我的左边框的CSS：

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

谢谢大家的帮助

最佳答案

您可以使用表或通过动态调整div的大小来执行此操作。

表法

尽管在Web浏览器中可以进行类似的操作，但是搜索引擎和其他计算机使用者可能会误解它，因为您使用table标记来标记非表格内容。

<table>
  <tr>
    <td colspan="3" class="bgr_top"/>
  </tr>
  <tr>
    <td class="bgr_left" />
    <td>Content content content</td>
    <td class="bgr_bottom" />
  </tr>
  <tr>
    <td colspan="3" class="bgr_bottom"/>
  </tr>
</table>

动态div

借助jQuery，我们可以发出语义正确的HTML，还可以在Web浏览器中创建所需的呈现。未经测试的样品：

<p class="bgr">Content content content</p>

<script type="text/javascript">
  $('.bgr').each(function(i,el){
    $('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
    // similar for top, right, and bottom
  });
</script>

关于html - 在边框上继续沿动态页面一直向下移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1583390/