个人中心
gpt4 book ai didi

html - 在主 package 器上方添加内容时，Material Design Lite 会溢出页面

转载 作者：太空宇宙 更新时间：2023-11-04 01:42:45 24 4
gpt4 key购买 nike

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

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

<main class="mdl-layout__content">

在插入状态栏时

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

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

enter image description here enter image description here

这是我的 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>

最佳答案

您可以将窗口图标放在 mdl 标题中，如 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>

关于html - 在主 package 器上方添加内容时，Material Design Lite 会溢出页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45110174/

24 4 0
文章推荐： python - 有人在 Google App Engine 上有 python 中 AES 加密的代码示例吗？
文章推荐： c - 如何从数组中删除整数循环(例如 1-2-3-1)
文章推荐： python - 用于存储键值对并快速检索最低值的键的数据结构
文章推荐： C 套接字编程，select() 和 fd_set 的问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com