在主包装器上方添加内容时，Material Design Lite 会溢出页面

Question

我正在使用 Material Design Lite 库创建一个 Electron 应用程序。

我在最顶部添加了一个状态栏以允许关闭最小化等，但它似乎与 Material Design Lite 冲突，因为它向

添加了 30 个像素

<main class="mdl-layout__content">

在

中插入状态栏时

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

汉堡包图标显示在状态栏内，打开导航时它也会显示在状态栏下方。

这是我的 HTML & CSS

<body>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        #title-bar {
            position: fixed;
            -webkit-app-region: drag;
            background-color: #1976d2;
            height: 30px;
            padding: none;
            display: inline-flex;
            width:100%;
            margin: 0px;
            z-index: 999;
        }

        #title {
            position: relative;
            top: 0px;
                margin-top: auto;
            margin-bottom: auto;

            left: 6px;
            color: #FFF;
        }

        #title-bar-btns {
            -webkit-app-region: no-drag;
            position: fixed;
            padding: 3px;
            top: 0px;
            right: 6px;
            background: rgba(255,255,255,0)
        }




        </style>
    <div id="title-bar">
        <div id="title">Title</div>
        <div id="title-bar-btns">
            <a id="min-btn" onclick="minimize()">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M20,14H4V10H20" />
                </svg>
            </a>

            <a id="max-btn">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M4,4H20V20H4V4M6,8V18H18V8H6Z" />
                </svg>
            </a>

            <a id="close-btn" onclick="closeWindow()">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
                </svg>
            </a>
        </div>
    </div>

    <div id="filler" style="padding:15px"></div>

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header mdl-color--blue-500">
            <div class="mdl-layout__header-row">
                <span class="mdl-layout-title">Title</span>
                <div class="mdl-layout-spacer"></div>
                <nav class="mdl-navigation mdl-layout--large-screen-only">
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
                <nav class="mdl-navigation">
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                </nav>
        </div>
        <main class="mdl-layout__content">
            <div id="content" class="page-content">


            </div>



            </div>
        </main>
    </div>

Answer 1

您可以将 window 图标放在 mdl header 中，例如 this

  <header class="mdl-layout__header mdl-color--blue-500">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <div id="title-bar-btns">
        <a id="min-btn" onclick="minimize()">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M20,14H4V10H20" />
                </svg>
        </a>

        <a id="max-btn">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M4,4H20V20H4V4M6,8V18H18V8H6Z" />
                </svg>
        </a>

        <a id="close-btn" onclick="closeWindow()">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#FFF" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
                </svg>
        </a>
      </div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>

在主包装器上方添加内容时，Material Design Lite 会溢出页面

Materal Design Lite overflows page when adding things above main wrapper

html

css

electron

material-design-lite