Menu
I'm working on a single-page Polymer app and I want to achieve a layout that takes up the entire browser window, without adding any scrollbars. I want the layout to look like this:
+---------------------------------------------+
| Header / Toolbar |
+---------------------------------------------+
| Custom element 1 | Custom el 2 |
| | |
| (width: 70%) | (width: 30%) |
| | |
| | |
| | |
| | |
+---------------------------------------------+
| Footer |
+---------------------------------------------+
The header and footer elements have a fixed height (given in pixels). The two custom elements have an initial width (given in %) and are separated by a core-splitter element, so the user can change the proportion they take up.
Goal: I want the two custom elements to take up ALL the remaining height in the browser window without creating any scrollbars.
My approach currently looks 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 have tried to put the flex attribute on the <div horizontal layout>, but that doesn't seem to have any effect. My only working approach so far is installing a window.onresize handler that takes the innerHeight of the browser window, subtracts the height of the header and footer, and sets the remainder explicitly on the two elements as max-height and min-height. This seems rather like a hack to me and I would assume this is a pretty common use case, and that Polymer has a built-in system to achieve this, but I cannot find it.
How can I achieve this layout without having to manually resize the elements?
785
Did you try this approach ?
<div id="div" vertical layout>
<header-element id="header_element"> Header</header-element>
<div id="div1" horizontal layout flex>
<custom-element-1 id="custom_element_1" flex three> Element 1 </custom-element-1>
<custom-element-2 id="custom_element_2"> Element 2 </custom-element-2>
</div>
<footer-element id="footer_element"> Footer</footer-element>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
