液体布局，中心有100％高度div，有溢出，周围有可调整大小的div(Liquid layout with 100% height div at the center that has overflow, along with resizable divs surrounding it)
所以这里是相关的标记，以使其更清楚（我也把它放到一个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一个固定的高度。我遇到的问题是中央'编辑'div太大了，即使它有overflow-y : scroll集。 尽管滚动条确实出现，但它的底部范围超出了页脚，实际上超出了页面的边缘。
如果我降低整体页面高度（例如通过调整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解决方案。
事实上，简单就是我在这里所做的最重要的事情。
我已经看到了孤立的各个方面的不同解决方案，但没有任何解决方案将它们全部组合在一起。
So here is the relevant markup to make it clearer (I've also put this into a 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; }There are a number of key points here:
I am in the fortunate position of having to target Google Chrome on Windows only so I don't have to worry about IE8 etc. The central 'editor' div has overflow set such that the vertical scrollbar should come into play when the content gets too big. The 'nav' div to the left is resizable, in that you can grab the handle at the bottom right of it and use this to resize it horizontally. The 'details' div near the top is also resizable; you can grab the handle at the bottom right of it to resize it vertically. I don't want to give the 'details' and 'toolbar' divs a fixed height.The problem I am having is that the central 'editor' div is too large even though it has overflow-y : scroll set. Although the scrollbar does appear, the bottom extent of it goes beyond the footer and indeed off the edge of the page.
If I decrease the overall page height (e.g. by adjusting the horizontal splitter in jsFiddle) I can see that the size of the central 'editor' div does decrease (the scrollbar grows accordingly). However, its overall resulting height is too big.
Increasing the width of the 'nav' div to the left (using the resize-handle) also causes the scrollbar of the central 'editor' div to grow accordingly, which is great. Aside from the fact that, again, its overall resulting height is too big.
The contents of the 'details' and 'toolbar' divs should wrap. E.g, if you increase the width of the 'nav' div enough (using the resize-handle), you'll see the 'Button1 / Button2 / etc' contents start to wrap and the 'editor' div is displaced down accordingly. The height of the 'editor' div needs to take account of this too.
Lastly, if I increase the height of the 'detail' div (again using the resize-handle) I find it has no affect on the central 'editor' div height at all; it just gets pushed down beyond the edge of the page and the scrollbar height doesn't change.
I think this is happening because the height: 100% I've set on the 'editor' div is using the height of something in its ancestor elements which is not correct, perhaps the body element. But I don't know what to do about it.
Ideally I'd use a pure CSS solution because if I were to resort to JavaScript I'd probably have to handle a number of different events, such as resizing the navigation and detail divs, resizing the screen, page load etc. But I would be open to a JavaScript solution if it were simple.
Indeed, simplicity is really what I am after here more than anything.
I've seen different solutions to various aspects of this in isolation but nothing which brings them all together.
最满意答案
我已经提出了一个JavaScript解决方案，在JQueryUI和Knockout的帮助下。
我意识到我希望在页面刷新期间保持任何调整。 一旦状态进入它，像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();I've come up with a JavaScript solution, with a little help from JQueryUI and Knockout.
I realised that I wanted any adjustments made to be persisted across page refreshes. As soon as state came into it an MVVM approach such as that supported by Knockout seemed like a good choice. It also means I can subscribe to JQueryUI Resizable events for relevant values and do a recalculation of the 'editor' div height accordingly.
The navigation width can be changed, as can the details height. The editor div height adjusts accordingly. It also works on first page load and for window resizes. Lastly the adjustments survive page refreshes (I'm storing them in cookies).
The HTML and CSS have been simplified a great deal.
The result is in this jsFiddle, and also here:
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();更多推荐
发布评论