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

Question

我正在制作一个网站，并且在我的主要内容周围设置了“边界”。我说“边框”是因为它不是 CSS 边框，而是带有背景图片的 div。

现在我将左右 div 边框 (#cont-border-left/right) 的高度明确设置为 675px，并且在我想要向下扩展的那个 div 的正下方有另一个 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 : Border-image:使用图像作为边框
• css-tricks.com : 了解边框图像
• border-image-generator
• border-image