我试图在放置在core-list聚合物中的<paper-tabs>元素上制作100％的高度。
不幸的是，当我尝试使用此链接StackOverflow Height on Core-list的评论解决我的问题时，我的核心列表的高度为80px，我无法设置更高的值。
我的代码如下：
<polymer-element name="progress-page" attributes="hash">
<template>
<link rel="stylesheet" href="../assets/css/styles.css">
<link rel="stylesheet" href="../assets/css/menu-card.css">
<sidebar-layout selected="main-page">
<div class="title">Report</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-sub-title">Progress</div>
</div>
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
</paper-tabs>
<core-pages selected="{{selected}}">
<div>
<div class="content" fit style="overflow:auto;">
<core-list data="{{data}}" fit height="120" style=" height: 100%;">
<template>
<div class="row" layout horizontal center>
<div data-index="{{index}}">{{model.name}}</div>
</div>
</template>
</core-list>
</div>
</div>
<div>
Page 2 qasdasd
</div>
</core-pages>
</sidebar-layout>
</template>
<script>
Polymer('progress-page', {
ready: function () {
this.selected = 0;
this.data = generateContacts();
function generateContacts() {
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
name: 'dddd',
string: 'asd'
});
}
return data;
};
}
});
</script>
我尝试了第二种解决方案，这仍然无效，代码如下。我必须以像素为单位制作高度以查看核心列表，有人可以帮帮我吗？
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-list/core-list.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
<polymer-element name="progress-page" attributes="hash">
<template>
<style>
:host {
display: block;
height: 100%;
}
core-list .row {
height: 90px;
padding: 15px;
}
</style>
<link rel="stylesheet" href="../../assets/css/styles.css">
<link rel="stylesheet" href="../../assets/css/menu-card.css">
<sidebar-layout selected="main-page">
<div class="title">Report</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-sub-title">Progress</div>
</div>
<div class="page-holder" horizontal layout center center-justified>
<section layout vertical is="auto-binding">
<paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
<paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab>
<paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab>
</paper-tabs>
<core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
<section active one fit layout style="height:auto;">
<list-test layout vertical>
<div class="page-holder" horizontal layout center center-justified>
<p class="progress-title">Summary</p>
</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-holder progress-sumarry-color " horizontal layout center
center-justified>
<div>Month</div>
<div flex>+ x persons</div>
<div>+ x points</div>
</div>
</div>
<core-list id="app" data="{{data}}" height="80" style="will-change: transform; overflow-y: auto;height:1000px;">
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
<input type="checkbox" checked="{{model.checked}}">
</div>
</template>
</core-list>
</list-test>
</section>
<section one flex horizontal layout>
</section>
</core-animated-pages>
</section>
</div>
</sidebar-layout>
</template>
<script>
Polymer('progress-page', {
ready: function () {
selected: 0;
var app = this.shadowRoot.getElementById("app");
app.data = generateContacts();
var template = this.shadowRoot.getElementById("templ");
function generateContacts() {
var data = [];
for (var i = 0; i < 88; i++) {
data.push({
name: 'dddd',
string: 'asd',
cardID: 'icard-' + Math.floor(Math.random() * (1000 - 1 + 1) + 1)
});
}
return data;
};
},
handleResponse: function (oldValue) {
if (this.response == 1) {
}
else {
window.localStorage.setItem("hash", '');
document.querySelector('app-router').go('/login?error=tokenTimeout');
}
},
}
);
</script>
</polymer-element>
<progress-page></progress-page>
答案 0 :(得分：1)
您的核心列表适合它的父元素，它是在核心页面下具有div元素的选定页面。确保为其父级设置正确的大小。
答案 1 :(得分：1)
答案 2 :(得分：0)
Tyhoan是对的，你应该检查父元素的大小
例如，只需向每个核心列表父项添加style="height:100%;"（来自您的第二个解决方案）似乎有效：
<div class="page-holder" horizontal layout center center-justified style="height:100%;">
<section layout vertical is="auto-binding" style="height:100%;">
<paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
<paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab>
<paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab>
</paper-tabs>
<core-animated-pages selected="{{ selected }}" selectedindex="0" notap style="height:100%;">
<section active one fit layout vertical>
<div class="page-holder" horizontal layout center center-justified>
<p class="progress-title">Summary</p>
</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-holder progress-sumarry-color " horizontal layout center
center-justified>
<div>Month</div>
<div flex>+ x persons</div>
<div>+ x points</div>
</div>
</div>
<div style="height:100%;">
<core-list id="app" data="{{data}}" style="height:100%;">
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
<input type="checkbox" checked="{{model.checked}}">
</div>
</template>
</core-list>
</div>
</section>
<section one flex horizontal layout>
</section>
</core-animated-pages>
</section>
</div>