更改 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

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

Change Height of mdl-layout-header mdl-layout-header-row

css

material-design-lite