gpt4 book ai didi

javascript - 如何让 Polymer 元素占据页面上的所有垂直空间?

转载 作者:搜寻专家 更新时间:2023-11-01 04:08:52 25 4
gpt4 key购买 nike

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

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

最佳答案

你尝试过这种方法吗?

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

关于javascript - 如何让 Polymer 元素占据页面上的所有垂直空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25490559/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com