Question

我正在尝试一个相对较新的JavaScript / jQuery UI库w2ui。我的LAMP应用程序中有一个布局，但我想知道如何使布局div占据屏幕的整个高度。这是来自官方网站的demo of a resizable layout。

这是HTML div，它将成为我的布局容器：

<div
    id="layout"
    style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>

以'600px'作为高度，但不是'100％'，这使它看不见。

JavaScript（为简洁起见删除了一些内容）：

    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
            {
                type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
            },
            { type: 'main', style: pstyle, content: 'main' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
        ]
    });

layout docs没有提到设置％高度，尽管它是早期的！也许这个问题会起到提示作用。

一种解决方案是读取布局顶部的Y维度，然后从屏幕高度中减去该值，然后创建该高度的布局。这可能会有效，但如果屏幕调整大小，我必须重新计算并重置高度，这有点笨拙。

我会尝试通过其他渠道获得答案，如果我成功了，我会在这里发布。

Answer 1

这是hacky解决方案，我现在将使用它;但是，更好的一个值得努力。公平地说，这在Firefox / OSX中非常有效，所以在我处于开发阶段时也很好。

新HTML：

    <!-- Here's the panel system -->
    <div id="layout-container" style="height:700px;">
        <div id="layout" style="width: 100%; height: 100%;"></div>
    </div>

在问题代码之前执行的其他JavaScript（调用this answer以获取调整大小的内容）：

function setLayoutContainerHeight()
{
    // Get top position of layout container, subtract from screen height, subtract a bit for padding
    var y = $('#layout-container').position().top;
    var layoutHeight = $(window).height() - y - 10;
    $('#layout-container').css('height', layoutHeight + 'px');      
}

// Whenever the window changes size, recalculate the layout container height
setLayoutContainerHeight();
$(window).resize(setLayoutContainerHeight);

更新：作者这个图书馆非常友好地提供了several ways to achieve a full-height layout，所有这些都比我的黑客更好！

如何在w2ui中将布局小部件扩展到完整高度？

1 个答案: