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

时间:2012-07-25 15:37:41

标签: javascript jquery css css3 height

我正在创建一个网站,并围绕我的主要内容设置“边框”。我说“边框”因为它不是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解决方案!

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

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

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