Question

我有以下我不明白的代码片段，为什么不考虑 display：flex 标签a上的高度？

.topbar-container {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex;
}

.navi-container {
  width: 100%;
  height: 50px;
  background-color: #119c7e;
  position: fixed;
  top: 100px;
  z-index: 999;
  display: flex;
  justify-content: center;
 }
 @media (min-width: 992px) {
   .navi-container .navi-menu {
     width: 992px;
     height: 100%;
     color: #2d3e50;
     overflow: hidden;
     display: flex;
   }
   .navi-container .navi-menu a {
     height: 100%;
   }
 }
.portfolio-container {
  width: 992px;
  position: absolute;
  top: 155px;
}
.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center;
}
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}
#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Cockpit</title>
<body cz-shortcut-listen="true">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
        <div class="app-container">
            <div class="topbar-container"></div>
            <div class="navi-container">
                <section class="navi-menu"><a>DASHBOARD</a><a>COINS</a></section>
            </div>
            <div class="portfolio-container">
                <p>
                    Lorem
                </p>
            </div>
        </div>
    </div>
</body>
</html>

当我从样式中删除 display：flex 时：

.navi-container .navi-menu {
  width: 992px;
  height: 100%;
  color: #2d3e50;
  overflow: hidden;
  display: flex;
}
.navi-container .navi-menu a {
  height: 100%;
}

}

然后高度：100％; 无效？为什么？

Answer 1

从display: flex中删除.navi-container .navi-menu并将display: inline-block添加到a。默认情况下，<a>内联显示。为了显示在中间，您需要从代码中移除高度并添加以下属性：

display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);

.topbar-container {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex; }

.navi-container {
  width: 100%;
  height: 50px;
  background-color: #119c7e;
  position: fixed;
  top: 100px;
  z-index: 999;
  display: flex;
  justify-content: center; }
  @media (min-width: 992px) {
    .navi-container .navi-menu {
      width: 992px;
      height: 100%;
      color: #2d3e50;
      overflow: hidden;
      }
      .navi-container .navi-menu a {
        display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);} }

.portfolio-container {
  width: 992px;
  position: absolute;
  top: 155px; }

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center; }

* {
  padding: 0;
  margin: 0; }

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif; }

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%; }

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Cockpit</title>

<body cz-shortcut-listen="true">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
        <div class="app-container">
            <div class="topbar-container"></div>
            <div class="navi-container">
                <section class="navi-menu"><a>DASHBOARD</a><a>COINS</a></section>
            </div>
            <div class="portfolio-container">
                <p>
                    Lorem

                </p>
            </div>
        </div>
    </div>
</body>

</html>

为什么没有显示的孩子的身高百分比无法工作？

1 个答案: