{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 戒情不戒烟 的问题《Fill page with iron-pages element》','https://www.manongdao.com/q-857044.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to fill the entire page with an iron-pages element. With the following code I trying to create a page that looks like the following:
-------------------------------------
| Top |
-------------------------------------
| Bottom |
| |
| |
| |
| |
| |
-------------------------------------
Code:
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<style is="custom-style">
html,body {
margin: 0;
padding: 0;
height: 100%;
background-color: yellow;
}
div {
border: 2px solid grey;
background-color: white;
margin: 2px;
}
p {
margin: 5px;
}
.outer {
width: 100%;
height: 100%;
@apply(--layout-vertical);
@apply(--layout-flex);
}
.inner {
@apply(--layout-flex);
}
</style>
</head>
<body>
<div class="outer">
<div><p>Top</p></div>
<iron-pages selected="0" class="inner">
<div><p>Bottom</p></div>
</iron-pages>
</div>
</body>
</html>
However, the bottom section is not expanding to fill the available space.
If I remove the iron-pages element and add the inner style to the bottom div, I get the desired result.
Solved the issue. The iron-pages element needs to flex to take the available space (as it was) and then the content also need to flex to fill the full area.