Fatal编程技术网
  • javascript/
  • Javascript 如何使聚合元素占据页面上的所有垂直空间？

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

javascript polymer

Javascript 如何使聚合元素占据页面上的所有垂直空间？,javascript,polymer,web-component,Javascript,Polymer,Web Component,我正在开发一个单页聚合应用程序，我想实现一个布局，它占据整个浏览器窗口，而不添加任何滚动条。我希望布局如下所示： +---------------------------------------------+ | Header / Toolbar | +---------------------------------------------+ | Custom element 1 | Custom el 2 | |

我正在开发一个单页聚合应用程序，我想实现一个布局，它占据整个浏览器窗口，而不添加任何滚动条。我希望布局如下所示：

+---------------------------------------------+
| Header / Toolbar                            |
+---------------------------------------------+
| Custom element 1             | Custom el 2  |
|                              |              |
| (width: 70%)                 | (width: 30%) |
|                              |              |
|                              |              |
|                              |              |
|                              |              |
+---------------------------------------------+
| Footer                                      |
+---------------------------------------------+
页眉和页脚元素具有固定的高度（以像素为单位）。这两个自定义元素具有初始宽度（以%）并由
核心拆分器
元素分隔，因此用户可以更改它们所占的比例

目标：我希望两个自定义元素占据浏览器窗口中的所有剩余高度，而不创建任何滚动条

我目前的做法如下：

<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
属性放在
上，但似乎没有任何效果。到目前为止，我唯一的工作方法是安装一个
窗口。onresize
处理程序接受浏览器窗口的
innerHeight
，减去页眉和页脚的高度，并在两个元素上显式地将剩余部分设置为
max height
和
min height
。这对我来说似乎是一个黑客攻击，我认为这是一个非常常见的用例，聚合物有一个内置的系统来实现这一点，但我找不到它

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

您尝试过这种方法吗

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


标题
要素1
要素2
页脚
这并不能让你得到70/30%的分成。似乎是原始海报所追求的。在@ebidel的建议下对我有效。