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

Question

如何设置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高度发生变化！

Answer 1

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

Pen demo