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

Question

我正在开发一个单页面的Polymer应用程序，并且想要实现一种布局，该布局占用整个浏览器窗口，而无需添加任何滚动条。 我希望布局看起来像这样：

+---------------------------------------------+
| Header / Toolbar                            |
+---------------------------------------------+
| Custom element 1             | Custom el 2  |
|                              |              |
| (width: 70%)                 | (width: 30%) |
|                              |              |
|                              |              |
|                              |              |
|                              |              |
+---------------------------------------------+
| Footer                                      |
+---------------------------------------------+

页眉和页脚元素具有固定的高度（以像素为单位）。 这两个自定义元素具有初始宽度（以％给出），并由core-splitter元素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> ，但这似乎没有任何效果。 到目前为止，我唯一innerHeight的方法是安装window.onresize处理程序，该处理程序获取浏览器窗口的innerHeight ，减去页眉和页脚的高度，并将其余部分显式设置为max-height和min-height 。 在我看来，这似乎是一种hack，我认为这是一个非常普遍的用例，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 个解决方案

解决方案1
5 已采纳 2014-08-25 17:12:41

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-08-25 17:12:41

解决方案1
5 已采纳 2014-08-25 17:12:41