Question

在下面的HTML中为height: 100%设置<div> .ui不起作用，即使所有父元素都将height设置为100%。 < / p>

这可能是因为我使用<core-header-panel>吗？我检查了它的代码，但是我没有看到任何会覆盖高度的东西。

这可能是因为使用了layout horizontal属性吗？

layout属性（构建于CSS Flexbox之上）和core-header-panel属于Polymer。

这是HTML（简化）：

<!doctype html>
<html>   
  <body unresolved>
    <core-header-panel>
      <div layout horizontal class="container">
        <div class="ui"> </div>             <!-- this does not take up 100% of
                                                 the height -->
        <div flex class="items"> </div>     <!-- this has content inside it which fills 
                                                 the height, but the <div> itself doesn't -->

这是我的CSS（简化）：

html, body {
  height: 100%;
}
core-header-panel {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; 
}
.container {
  width: 100%;
  height: 100%;
}
.ui {
  height: 100%;
  position: relative;
  margin: 30px;
}
.items {
  display: inline-block;
  height: 100%;
  margin: 30px;
}

任何帮助将不胜感激。

编辑1：使用DevTools我注意到<core-header-panel>占据了100％的高度，但<div> .container却没有。 {＆＃34;样式＆＃34;中height: 100%;未被.container划掉。 DevTools中的标签。

编辑2：INFO ON POLYMER Here is a link to a simple explanation of Polymer layout attributes和here is a link to some information on core header panel.两个页面的右上角都有Github链接。

Answer 1

解决方案实际上非常简单。

我必须将fullbleed vertical layout添加到<core-header-panel>。 fullbleed迫使它占据父母的整个高度。自从我指定height: 100%以来，我没有看到这样做的原因，但如果没有它，它似乎无效。

我还将fit添加到<div> .container以使其适合父级。

<!doctype html>
<html>   
  <body unresolved>
    <core-header-panel fullbleed vertical layout>  <!-- added "fullbleed vertical layout" here -->
      <div fit layout horizontal class="container">  <!-- added "fit" here -->
        <div class="ui"> </div>             
        <div flex class="items"> </div>

身高：100％不工作即使所有父母都有身高：100％

1 个答案: