Question

我正在开发单页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，减去页眉和页脚的高度，并将两个元素上的余数显式设置为{{1 }和max-height。这看起来像是一个黑客，我认为这是一个非常常见的用例，而Polymer有一个内置系统来实现这一点，但我找不到它。

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

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

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

1 个答案: