0

所以这里是相关的标记，使其更清晰（我也把它放入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 上定位 Google Chrome，所以我不必担心 IE8 等。
  • 中央“编辑器” div 设置了溢出，以便在内容变得太大时垂直滚动条应该发挥作用。
  • 左侧的 'nav' div 是可调整大小的，因为您可以抓住它右下角的手柄并使用它来水平调整它的大小。
  • 靠近顶部的“详细信息”div 也可以调整大小；你可以抓住它右下角的手柄来垂直调整它的大小。
  • 我不想给“详细信息”和“工具栏”div 一个固定的高度。

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

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

向左增加“导航”div 的宽度（使用调整大小手柄）也会导致中央“编辑器”div 的滚动条相应增长，这很棒。除了这样一个事实之外，它的整体结果高度也太大了。

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

最后，如果我增加“详细”div 的高度（再次使用调整大小手柄），我发现它根本不会影响中央“编辑器”div 的高度；它只是被推到页面边缘之外，滚动条高度不会改变。

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

理想情况下，我会使用纯 CSS 解决方案，因为如果我使用 JavaScript，我可能必须处理许多不同的事件，例如调整导航和详细 div 的大小、调整屏幕大小、页面加载等。但我会如果 JavaScript 解决方案很简单，请对它持开放态度。

确实，简单是我在这里最追求的。

我已经孤立地看到了针对各个方面的不同解决方案，但没有任何东西可以将它们结合在一起。

4

1 回答 1

0

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

我意识到我希望所做的任何调整都能在页面刷新时保持不变。一旦状态进入它，像 Knockout 支持的 MVVM 方法似乎是一个不错的选择。这也意味着我可以为相关值订阅 JQueryUI Resizable 事件，并相应地重新计算“编辑器”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();​
于 2012-11-10T18:57:17.453 回答