函数 equalHeight ，设置要应用的最小高度？

发布于 2024-12-03 04:16:16 字数 1061 浏览 0 评论 0原文

我已经尝试了一切，但是没有 javascript，我无法实现设计师给我的糟糕的布局！

<块引用>
正如你所看到的，我有 div #backgr-box ，它必须使用 z-index 进行绝对定位，才能正确位于 #contenuto （它包含页面内容！！）现在为了解决 #backgr-box 的可扩展性问题，如果 #contenuto 的内容长于侧边栏 #barra-teriore ，我有下面的代码可以工作，但它相反的情况则不行，请参阅页面：http://demo.liquidfactory.it/secondopolo/per-informarti

那么我如何告诉 javascript 仅在 div 侧边栏的最小高度上应用该计算#barra-teriore ??

需要帮助..拜托！

function equalHeight(group) {
           tallest = 0;
           group.each(function() {
              thisHeight = $(this).height();
              if(thisHeight > tallest) {
                 tallest = thisHeight = $("#contenuto").height() - 380;
              }
           });
           group.height(tallest);
        }
        $(document).ready(function() {
           equalHeight($(".column"));
        });

原文

I have tried everything, but without javascript I cannot achieve the bad layout my designer gave to me!!

As you can see I have the div #backgr-box that has to be absolute positioned with z-index to be properly behind the #contenuto (which holds the page content!!)
Now to solve the extensibilty trouble of #backgr-box I have the below code that works if the content of #contenuto is longer than the sidebar #barra-laterale , but it is not ok in opposite case, see page: http://demo.liquidfactory.it/secondopolo/per-informarti

So how can I tell javascript to apply that calculation only over a minimum height of div sidebar #barra-laterale ??

Need help.. please!

function equalHeight(group) {
           tallest = 0;
           group.each(function() {
              thisHeight = $(this).height();
              if(thisHeight > tallest) {
                 tallest = thisHeight = $("#contenuto").height() - 380;
              }
           });
           group.height(tallest);
        }
        $(document).ready(function() {
           equalHeight($(".column"));
        });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒解孤独 2024-12-10 04:16:16

问题可能出在这一行：

tallest = thisHeight = $("#contenuto").height() - 380;

当前它将变量 tallest 和 thisHeight 设置为内容区域的高度减去 380 像素。将其更改为：

tallest = thisHeight;

它会将所有列的大小调整为最高列的高度。

编辑：看起来您的右侧列实际上由具有 .barra- Laterale 类的多列组成，在这种情况下，您可能需要完全采取另一种策略：

// calculate the total height of the content are and sidebar
var contentHeight = $("#contenuto").height();
var sidebarHeight = 0;
$(".barra-laterale").each(function() { sidebarHeight += $(this).height(); })

if (sidebarHeight > contentHeight) {
    $("#contenuto").height(sidebarHeight);
} else {
    // extend the last sidebar column to cover the difference between the 
    // height of the content and the sum of the sidebar heights
    var lastSideBarHeight = $(".barra-laterale").last().height();
    var heightDifference = contentHeight - sidebarHeight; 
    $(".barra-laterale").last().height(lastSideBarHeight + heightDifference) 
}

The problem is likely with this line:

tallest = thisHeight = $("#contenuto").height() - 380;

Currently it is setting both the variables tallest and thisHeight to the height of the content region minus 380 pixels. Change it to:

tallest = thisHeight;

And it will resize all the columns to the height of the tallest one.

Edit: It looks like your right-hand column actually consists of multiple columns with a class of .barra-laterale in this case you may want to take another tack altogether:

// calculate the total height of the content are and sidebar
var contentHeight = $("#contenuto").height();
var sidebarHeight = 0;
$(".barra-laterale").each(function() { sidebarHeight += $(this).height(); })

if (sidebarHeight > contentHeight) {
    $("#contenuto").height(sidebarHeight);
} else {
    // extend the last sidebar column to cover the difference between the 
    // height of the content and the sum of the sidebar heights
    var lastSideBarHeight = $(".barra-laterale").last().height();
    var heightDifference = contentHeight - sidebarHeight; 
    $(".barra-laterale").last().height(lastSideBarHeight + heightDifference) 
}

回复收藏 0 原文

~没有更多了~