Chr*_*s W 5 javascript web-component polymer
我正在开发一个单页的Polymer应用程序,我希望实现一个占用整个浏览器窗口的布局,而不添加任何滚动条.我希望布局看起来像这样:
+---------------------------------------------+
| Header / Toolbar |
+---------------------------------------------+
| Custom element 1 | Custom el 2 |
| | |
| (width: 70%) | (width: 30%) |
| | |
| | |
| | |
| | |
+---------------------------------------------+
| Footer |
+---------------------------------------------+
页眉和页脚元素具有固定的高度(以像素为单位).这两个自定义元素具有初始宽度(以%给出)并由core-splitter元素分隔,因此用户可以更改它们占用的比例.
目标:我希望两个自定义元素占用浏览器窗口中的所有剩余高度而不创建任何滚动条.
我的方法目前看起来如下:
<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>
我试图把flex属性放在<div horizontal layout>,但似乎没有任何影响.到目前为止,我唯一的工作方法是安装一个window.onresize处理器,它接受innerHeight浏览器窗口,减去页眉和页脚的高度,并在两个元素上显式设置余数为max-height和min-height.这看起来像是一个黑客,我认为这是一个非常常见的用例,而Polymer有一个内置系统来实现这一点,但我找不到它.
如何在不必手动调整元素大小的情况下实现此布局？
小智 5
你尝试过这种方法吗？
<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>