Javascript 基于页面内容高度的侧边框自动扩展

我正在制作一个网站，在我的主要内容周围有“边框”。我之所以说“边框”，是因为它不是CSS边框，而是带有背景图像的div

现在，我将左、右div border（#cont border left/right）高度显式设置为675px，并且我还有另一个div（#extend-l/r）正好位于主内容超过675px时我要向下展开页面的div下方

如果可能的话，我想只使用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解决方案找到了答案。我对我所做的编辑非常满意

这是工作代码，如果将来有人需要类似的东西

$(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)
    }
});  

---

我明白了。我对我所做的编辑非常满意

这是工作代码，如果将来有人需要类似的东西

$(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)
    }
});  

---

你可能会对它感兴趣。见各种：

• ：边框图像：为边框使用图像
• ：了解边界图像

---

您可能会感兴趣。见各种：

• ：边框图像：为边框使用图像
• ：了解边界图像

---

如果您的容器宽度是固定的，那么使用两个单独的borders@SVS不是100%确定你的意思，但左边框和右边框看起来不同，所以我让他们在各自的div中使用各自的唯一背景图像。如果您的容器宽度是固定的，那么使用两个单独的borders@SVS不是100%确定这是什么意思，但是左边框和右边框看起来不同，所以我让它们各自在各自的div中使用唯一的背景图像。