文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使聚合物元素占据页面上所有的垂直空间？

问如何使聚合物元素占据页面上所有的垂直空间？
EN

Stack Overflow用户

提问于 2014-08-25 16:44:09

回答 1查看 1.3K关注 0票数 5

我正在开发一个单页的聚合物应用程序，我想要实现一个占据整个浏览器窗口的布局，而不添加任何滚动条。我希望布局看起来像这样：

+---------------------------------------------+
| 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这两个元素上显式地设置其余部分。对我来说，这似乎是一次黑客攻击，我认为这是一个非常常见的用例，而聚合物有一个内置系统来实现这一点，但我找不到它。

如何实现这个布局而不必手动调整元素的大小？

javascript

polymer

web-component

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-25 17:12:41

你试过这种方法了吗？

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25490559

复制

相似问题

问如何使聚合物元素占据页面上所有的垂直空间？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使聚合物元素占据页面上所有的垂直空间？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使聚合物元素占据页面上所有的垂直空间？
EN