根据页面内容高度自动扩展边框边框

Question

我正在创建一个网站，并围绕我的主要内容设置“边框”。我说“边框”因为它不是CSS边框，而是带有背景图像的div。

现在我的左右边界（＃cont-border-left / right）高度明确设置为675px，我有另一个div（#extend-l / r）就在我要扩展的范围之下当主要内容超过675px时的页面。

我想尽可能使用CSS，但如果不是，JavaScript / JQuery对我来说也是一个很好的解决方案。

我打算在这里粘贴一堆代码，但是查看源代码可能会更容易，因为我认为如果能够一起看到这些代码会更有意义。

在类似的问题上看到这个......但是我对jQuery或JavaScript并不是很好。

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});

把它变成类似的东西：

$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height = $('#content' - 645px) 

^上述行需要帮助/纠正

}
else
{
$('#extend-l').height = 0
}
});  

关于我应该尝试的任何想法？

EDIT2：仍然想知道某人是否有纯CSS解决方案！

Answer 1

您可能对CSS3 border-images感兴趣。见各种：

• css3.info：边框图片：使用图片作为边框
• css-tricks.com：了解border-image
• border-image-generator
• border-image

Answer 2

想出来。我接受了我所做的编辑。

如果以后任何人都需要类似的东西，那就是工作代码。

$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
    {
    $('#extend-l').height($('#content').height()-675)
    }

if($('#content').height() > $('#cont-border-right').height())
    {
    $('#extend-r').height($('#content').height()-675)
    }
});