【发布时间】：2015-08-27 07:02:44
【问题描述】：
我有一组自己看起来不错的材料设计卡片，但是当我将它们放在核心抽屉面板中时，看起来 div 高度正在修复。我正在尝试为它们垂直压实的方式找到解决方案。
这是核心抽屉面板外的样子：
这是核心抽屉面板中 3 张卡片的样子（没有显示实际的左侧抽屉，但看起来不错）：
这是我的代码的简化版本（未显示聚合物进口）：
<head>
<style>
#mainDiv {
background-color: transparent;
overflow: scroll;
}
#mainDiv * {
font-family: 'Roboto', sans-serif;
background: #eee;
height: 100%;
width: 100%;
padding: 40px;
margin: 0;
color: #2E2E3C;
line-height: 24px;
-webkit-font-smoothing: antialiased;
}
#mainDiv * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
}
#mainDiv *::-moz-selection {
color: #CFD8DC;
background: #009688;
}
#mainDiv * ::selection {
color: #CFD8DC;
background: #009688;
}
#mainDiv * ::-webkit-scrollbar {
width: 10px!important;
background: #FAFAFA;
}
#mainDiv * ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .08);
}
#mainDiv * ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
}
/* End defaults*/
#mainDiv .card {
display: block;
vertical-align: top;
width: 350px;
position: relative;
overflow: hidden;
margin: 10px;
background: #FFF;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: #272727;
border-radius: 2px;
}
#mainDiv .card .title {
line-height: 48px;
font-size: 24px;
font-weight: 300;
}
#mainDiv .card .content {
padding: 20px;
font-weight: 300;
border-radius: 0 0 2px 2px;
}
#mainDiv .card p {
margin: 0;
}
#mainDiv .card .action {
border-top: 1px solid rgba(160, 160, 160, 0.2);
padding: 20px;
}
#mainDiv .card a {
color: #ffab40;
margin-right: 20px;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
text-transform: uppercase;
text-decoration: none;
}
#mainDiv .card .image {
position: relative;
}
#mainDiv .card .image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
#mainDiv .card .image .title {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
color: #FFF;
}
#mainDiv .checkBoxSpan {
float: right;
}
</style>
</head>
<body>
<core-drawer-panel>
<div drawer>
<!— bunch of dropdown menus —>
</div drawer>
<div main id="mainDiv" layout vertical>
<div class="card">
<div class="content">
<span class="title">Card title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="action">
<a href='#'>This is a link</a>
<a href='#'>This is a link</a>
</div>
</div>
</core-drawer-panel>
</body>
供参考，材料卡代码来自这里：http://materialdesignblog.com/10-material-design-cards-for-web-in-css-html/
【问题讨论】：
标签： html css polymer core-elements