css - 更改mdl-layout-header的高度mdl-layout-header-row

如何设置CSS来更改此Material Design Lite标题的高度。

  <!-- MDL-LAYOUT - HEADER -->
  <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">

      </div>
  </header>

.mdl-layout__header{
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 1px solid gold;
    border-bottom: 1px solid gold;
    color: gold;
    height: 16px !important;
}
.mdl-layout__header-row{
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    color: gold;
    height: 16px !important;
}

我可以看到mdl-layout-header-row的高度变化，但无法改变mdl-layout__header的高度！

最佳答案

您还必须覆盖min-height属性（无需使用!important）。

Pen demo

关于css - 更改mdl-layout-header的高度mdl-layout-header-row，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46440393/