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上でのみGoogleChromeをターゲットにする必要があるという幸運な立場にあるので、IE8などについて心配する必要はありません。
  • 中央の「editor」divにはオーバーフローが設定されているため、コンテンツが大きくなりすぎたときに垂直スクロールバーが機能します。
  • 左側の「nav」divはサイズ変更可能で、右下のハンドルをつかみ、これを使用して水平方向にサイズを変更できます。
  • 上部にある「details」divもサイズ変更可能です。右下のハンドルをつかんで、垂直方向にサイズを変更できます。
  • 'details'と'toolbar'divsに固定の高さを与えたくありません。

私が抱えている問題は、中央の「editor」divがoverflow-y : scroll設定されていても大きすぎることです。スクロールバーは表示されますが、その下部の範囲はフッターを超えており、実際にはページの端から外れています。

ページ全体の高さを減らすと（たとえば、jsFiddleで水平スプリッターを調整することにより）、中央の「エディター」divのサイズが減少することがわかります（それに応じてスクロールバーが大きくなります）。ただし、全体的な高さは大きすぎます。

'nav' divの幅を左に大きくすると（resize-handleを使用）、それに応じて中央の'editor'divのスクロールバーも大きくなります。これはすばらしいことです。繰り返しになりますが、結果として得られる全体の高さが大きすぎるという事実は別として。

'details'および'toolbar'divの内容は折り返す必要があります。たとえば、（resize-handleを使用して）「nav」divの幅を十分に大きくすると、「Button1 / Button2 / etc」の内容が折り返され始め、それに応じて「editor」divが下に移動します。'editor' divの高さも、これを考慮する必要があります。

最後に、「detail」divの高さを増やすと（ここでもresize-handleを使用）、中央の「editor」divの高さにまったく影響がないことがわかります。ページの端を超えて押し下げられるだけで、スクロールバーの高さは変わりません。

height: 100%これは、「editor」divに設定した祖先要素の高さを使用しているために発生していると思います。これは、正しくない、おそらくbody要素です。しかし、私はそれについて何をすべきかわかりません。

理想的には、純粋なCSSソリューションを使用します。これは、JavaScriptを使用する場合、ナビゲーションと詳細divのサイズ変更、画面のサイズ変更、ページの読み込みなど、さまざまなイベントを処理する必要があるためです。単純な場合は、JavaScriptソリューションを受け入れてください。

確かに、シンプルさは本当に私がここで何よりも求めているものです。

私はこれのさまざまな側面に対するさまざまな解決策を単独で見てきましたが、それらをすべてまとめるものは何もありません。

4

1 に答える 1

0

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();​
于 2012-11-10T18:57:17.453 に答える