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

Automatic extension of side borders based on page content height

本文关键字：扩展 边框 高度      更新时间：2024-02-26

我正在制作一个网站；边界"；围绕我的主要内容。我说"；边界"；因为它不是CSS边框，而是带有背景图像的div。

现在，我的左和右div边界（#cont-bborder-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解决方案

您可能对CSS3边界图像感兴趣。参见各种：

  • css3.info:边框图像：使用图像作为边框
  • css-tricks.com:了解边界图像
  • 边界图像生成器
  • 边界图像

想明白了。我很接近我所做的编辑。

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

$(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)
    }
});
相关文章：