Question

所以这里是相关的标记，以使其更清楚（我也将其放入jsFiddle）：

HTML

<div id="header">
    Header
</div>

<div id="container">
    <div id="tableWrapper">
        <div id="tableRowWrapper">
            <div id="nav">
                Navigation
            </div>
            <div id="main">
                <div id="details">
                    Details
                </div>
                <div>
                    Button1 Button2 Button3 Button4 Button5 Button6 Button7
                </div>
                <div id="editor">
                    <div class="paragraph">
                        Vestibulum ante ipsum primis in faucibus orci
                    </div>
                    <div class="paragraph">
                        Vestibulum ante ipsum primis in faucibus orci
                    </div>
                    <div class="paragraph">
                        Vestibulum ante ipsum primis in faucibus orci
                    </div>
                    <div class="paragraph">
                        Vestibulum ante ipsum primis in faucibus orci
                    </div>
                    <div class="paragraph">
                        Vestibulum ante ipsum primis in faucibus orci
                    </div>
                </div>
            </div>
        </div>            
    </div>
</div>

<div id="footer">
    Footer
</div>

CSS

#header{
    position: fixed;
    top: 0px;
    height: 30px;
}

#footer{
    position: fixed;
    bottom: 0px;
    height: 30px;
}

#container{
    position:fixed;
    top:30px;
    bottom:30px;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1;
    background-color: #dddddd;
}

#tableWrapper
{
    display: table;
    width: 100%;   
    height: 100%;
}

#tableRowWrapper
{
    display: table-row;
}

#nav
{
    display: table-cell;
    background-color: #ccffff;
    resize: horizontal;
    overflow: auto;
    width: 100px;    
}

#main
{
    display: table-cell;
    background-color: #ffffcc;            
}

#details
{
    background-color: #faccfa;
    resize: vertical;
    overflow: auto;
    height: 40px;

}

#editor
{
    background-color: #fddfaf;   
    height: 100%;
    overflow-y: auto;
}

.paragraph
{
    min-height: 150px;
}

这里有许多要点：

我有幸只能在Windows上定位谷歌浏览器，所以我不必担心IE8等。
中央'编辑'div有溢出设置，当内容变得太大时，垂直滚动条应该起作用。
左边的'nav'div可以调整大小，因为你可以抓住它右下方的手柄并使用它来水平调整它。
顶部附近的'细节'div也可调整大小;你可以抓住它右下角的把手来垂直调整它。
我不想给'详细信息'和'工具栏'div一个固定的高度。

我遇到的问题是，即使设置了overflow-y : scroll，中央'编辑'div也太大了。虽然滚动条确实出现了，但它的底部范围超出了页脚，实际上超出了页面的边缘。

如果我降低整体页面高度（例如通过调整jsFiddle中的水平分割器），我可以看到中央“编辑器”div的大小确实减小（滚动条相应增长）。但是，它的整体高度太大了。

向左增加'nav'div的宽度（使用resize-handle）也会导致中央'editor'div的滚动条相应增长，这很好。除此之外，它的整体高度太大了。

'details'和'toolbar'div的内容应该换行。例如，如果你增加'nav'div的宽度（使用resize-handle），你会看到'Button1 / Button2 / etc'内容开始换行，'editor'div相应地向下移位。 “编辑”div的高度也需要考虑到这一点。

最后，如果我增加'detail'div的高度（再次使用resize-handle），我发现它对中央'editor'div高度没有任何影响;它只是被推下超出页面边缘，滚动条高度不会改变。

我认为这种情况正在发生，因为我在'编辑'div上设置的height: 100%正在使用其祖先元素中某些东西的高度，这可能是正文元素。但我不知道该怎么办。

理想情况下，我会使用纯CSS解决方案，因为如果我使用JavaScript，我可能需要处理许多不同的事件，例如调整导航和细节div的大小，调整屏幕大小，页面加载等。但如果它很简单，我会接受JavaScript解决方案。

事实上，简单就是我在这里所做的最重要的事情。

我已经看到了孤立的各个方面的不同解决方案，但没有任何方法可以将它们全部组合在一起。

Answer 1

我在JQueryUI和Knockout的帮助下提出了一个JavaScript解决方案。

我意识到我希望在页面刷新期间保持任何调整。一旦状态进入它，像Knockout支持的MVVM方法似乎是一个不错的选择。这也意味着我可以为相关值订阅JQueryUI Resizable事件，并相应地重新计算'editor'div高度。

导航宽度可以更改，细节高度也可以更改。编辑器div高度相应调整。它也适用于首页加载和窗口大小调整。最后，调整会在页面刷新后存活（我将它们存储在cookie中）。

HTML和CSS已经简化了很多。

结果在此jsFiddle中，也在此处：

<强> HTML

<div id="header">
    Header
</div>
<div id="container">
    <div id="nav" data-bind="jqResizableWidth: navWidth, jqOptions: { handles: 'e', minWidth: 5 } ">
            Navigation
        </div>
        <div id="main">
            <div id="details" data-bind="jqResizableHeight: detailsHeight, jqOptions: { handles: 's', minHeight: 10 }">
                Details
            </div>
            <div id="toolbar">
                Button1 Button2 Button3 Button4 Button5 Button6 Button7
            </div>
            <div id="editor">
                <div class="paragraph">
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quam sapien, volutpat ac iaculis ut, malesuada quis massa. Quisque quis risus eu tellus mattis sagittis vulputate at nisl. Donec at nibh non neque facilisis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at condimentum est. Fusce gravida diam vel odio venenatis vitae cursus lorem cursus. Ut tristique, libero quis scelerisque semper, arcu velit faucibus dui, eu imperdiet nisl arcu id enim. Nullam eget placerat risus.
                </div>
                <div class="paragraph">
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quam sapien, volutpat ac iaculis ut, malesuada quis massa. Quisque quis risus eu tellus mattis sagittis vulputate at nisl. Donec at nibh non neque facilisis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at condimentum est. Fusce gravida diam vel odio venenatis vitae cursus lorem cursus. Ut tristique, libero quis scelerisque semper, arcu velit faucibus dui, eu imperdiet nisl arcu id enim. Nullam eget placerat risus.
                </div>
                <div class="paragraph">
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quam sapien, volutpat ac iaculis ut, malesuada quis massa. Quisque quis risus eu tellus mattis sagittis vulputate at nisl. Donec at nibh non neque facilisis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at condimentum est. Fusce gravida diam vel odio venenatis vitae cursus lorem cursus. Ut tristique, libero quis scelerisque semper, arcu velit faucibus dui, eu imperdiet nisl arcu id enim. Nullam eget placerat risus.
                </div>
                <div class="paragraph">
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quam sapien, volutpat ac iaculis ut, malesuada quis massa. Quisque quis risus eu tellus mattis sagittis vulputate at nisl. Donec at nibh non neque facilisis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at condimentum est. Fusce gravida diam vel odio venenatis vitae cursus lorem cursus. Ut tristique, libero quis scelerisque semper, arcu velit faucibus dui, eu imperdiet nisl arcu id enim. Nullam eget placerat risus.
                </div>
                <div class="paragraph">
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quam sapien, volutpat ac iaculis ut, malesuada quis massa. Quisque quis risus eu tellus mattis sagittis vulputate at nisl. Donec at nibh non neque facilisis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at condimentum est. Fusce gravida diam vel odio venenatis vitae cursus lorem cursus. Ut tristique, libero quis scelerisque semper, arcu velit faucibus dui, eu imperdiet nisl arcu id enim. Nullam eget placerat risus.
                </div>
            </div>
        </div>
</div>

<div id="footer">
    Footer
</div>

<强> CSS

#header{
    position: fixed;
    top: 0px;
    height: 30px;
}

#footer{
    position: fixed;
    bottom: 0px;
    height: 30px;
}

#container{
    position:fixed;
    top:30px;
    bottom:30px;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1;
    background-color: #dddddd;
}

#nav
{
    display: table-cell;
    background-color: #ccffff;
}

#nav .ui-resizable-e {
    background: #cccccc;
    width:5px;
    height: 100%;    
}

#main
{
    display: table-cell;
    background-color: #ffffcc;            
}

#details
{
    padding-left: 5px;
    background-color: #faccfa;
    width: 100%;
}

#details .ui-resizable-s {
    background: #cccccc;
    width:100%;
    height: 5px;    
}

#toolbar
{
    padding-top: 5px;
    padding-left: 5px;    
}

#editor
{
    padding-left: 5px;
    background-color: #fddfaf;   
    overflow-y: scroll;
}

.paragraph
{
    min-height: 150px;
}

<强>的JavaScript

ko.bindingHandlers.jqResizableWidth = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).width(value);

        var options = allBindingsAccessor().jqOptions || {};
        $(element).resizable(options);


        ko.utils.registerEventHandler(element, "resize", function(event, ui) {
            var observable = valueAccessor();
            var value = ui.size.width;
            observable(value);

            // Have to include the next line because otherwise JQueryUI Resizable
            // fixes the height to the currently resolved height.
            $(element).height('100%');
        });
    }
};

function adjustEditor() {

    // Extra 5px added because of 5px 
    var height = $(window).height() - $('#header').height() - $('#details').height() - $('#toolbar').height() - $('#details .ui-resizable-s').height() - $('#footer').height();

    $('#editor').height(height); 
}

ko.bindingHandlers.jqResizableHeight = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).height(value);

        var options = allBindingsAccessor().jqOptions || {};
        $(element).resizable(options);


        ko.utils.registerEventHandler(element, "resize", function(event, ui) {
            var observable = valueAccessor();
            var value = ui.size.height;
            observable(value);

            // Have to include the next line because otherwise JQueryUI Resizable
            // fixes the width to the currently resolved width.
            $(element).width('100%');
        });
    }
};



var viewModel = function(navWidth, detailsHeight) {

    var self = this;

    self.navWidth = ko.observable(navWidth); 
    self.detailsHeight = ko.observable(detailsHeight);


    self.navWidth.subscribe(function(newValue) {
        $.cookie('navWidth', newValue, {
            expires: 7,
            path: '/'
        });

        adjustEditor();
    });

    self.detailsHeight.subscribe(function(newValue) {
        $.cookie('detailsHeight', newValue, {
            expires: 7,
            path: '/'
        });

        adjustEditor();
    });

};

var navWidth = $.cookie('navWidth') || 80;
var detailsHeight = $.cookie('detailsHeight') || 50;

ko.applyBindings(new viewModel(navWidth, detailsHeight));


$(window).resize(function() {adjustEditor();});
$(window).resize();

液体布局，中心有100％高度div，有溢出，周围有可调整大小的div

1 个答案: