3

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

这是将成为我的布局容器的 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' }
        ]
    });

布局文档没有提到设置 % 高度，尽管还为时过早！也许这个问题会起到提示作用。

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

4

1 回答 1

3

这是我现在要使用的 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，在问题中的代码之前执行（调整大小的这个答案的道具）：

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);

更新：作者这个库非常好心地提供了几种实现全高布局的方法，所有这些都比我的 hack 更好！

于 2013-05-12T19:33:58.627 回答