I am working on a single-page Polymer software, and I want to get a layout that occupies the entire browser window, without adding scroll. I want the layout to look like this:
+---------------------------------------------+ | Header / Toolbar | +---------------------------------------------+ | Custom element 1 | Custom el 2 | | | | | (width: 70%) | (width: 30%) | | | | | | | | | | | | | +---------------------------------------------+ | Footer | +---------------------------------------------+
Header and footer elements have a fixed height (specified in pixels). Two custom elements have an initial width (specified in%) and are separated by a core-splitter element, so the user can change the proportion that they take.
Purpose : I want two user elements to occupy ALL the remaining height in the browser window without creating a scroll.
My approach is as follows:
<body> <div vertical layout> <header-element></header-element> <div horizontal layout> <custom-element-1></custom-element-1> <core-splitter direction="right"></core-splitter> <custom-element-2></custom-element-2> </div> <footer-element></footer-element> </div> </body>
I tried to put the flex attribute in the <div horizontal layout> , but this does not seem to have any effect. So far, my only working approach is to install a window.onresize handler that takes the innerHeight the browser window, subtracts the height of the header and footer, and sets the remainder explicitly to two elements like max-height and min-height seems like a hack to me. and I would suggest that this is a fairly common use case, and that Polymer has an embedded system for this, but I cannot find it.
How can I achieve this layout without having to manually resize the elements?
Chris source share