如何让 Polymer 元素占据页面上的所有垂直空间？答案

【问题标题】：How can I make a Polymer element take up all vertical space on the page?如何让 Polymer 元素占据页面上的所有垂直空间？
【发布时间】：2014-08-25 16:44:09
【问题描述】：

我正在开发一个单页 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 这两个元素.这对我来说似乎是一种 hack，我认为这是一个非常常见的用例，并且 Polymer 有一个内置系统来实现这一点，但我找不到它。

如何在不手动调整元素大小的情况下实现这种布局？

【问题讨论】：

标签： javascript polymer web-component

【解决方案1】：

您尝试过这种方法吗？

<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>

【讨论】：

这并不能完全让您获得 70/30% 的分成。 jsbin.com/natoqededosu/1/edit 好像是原海报所追求的。
根据@ebidel 的建议为我工作。