1

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

现在，我将左右 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 解决方案！

4

2 回答 2

1

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

于 2012-07-25T17:04:59.413 回答
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)
    }
});
于 2012-07-25T16:56:33.803 回答