html - 为什么没有显示的 child 的高度百分比不起作用？-6ren

html - 为什么没有显示的 child 的高度百分比不起作用？

转载作者：行者123 更新时间：2023-11-28 14:50:17

25

4

我有以下代码片段，我不明白，为什么没有 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%;
}

那么height: 100%;不生效？为什么？

最佳答案

删除 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>

关于html - 为什么没有显示的 child 的高度百分比不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51754288/

25

4

0

文章推荐： html - CSS 类无效

文章推荐： ios - 试图返回开始 : unrecognized selector sent to instance

文章推荐： ios - 如何按列表过滤 Realm 对象

文章推荐： html - 如何在特殊情况下实现垂直div对齐？

language-agnostic - 百分比、百分比、分数、比例因子的术语？
我的函数概念上都返回相同的东西，但结果可以采用不同的形式: function GetThingy() 有四个不同的函数，每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
Java 百分比
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。有什么方法可以计算(例如)120 的 50
范围格式中每个单元格的 VBA 百分比
我四处寻找这个，它看起来很简单，但我无法让它工作。我有一张表格，其中一列需要格式化为百分比。下面是我的代码，但它没有格式化单元格，它只是将它们保留为小数。我想这是因为 cell ，即使声明为范围，
WPF - margin 百分比
我刚刚开始使用 WPF。从那以后，我开始关注造型系统。我来自 CSS 背景，我想以百分比设置边距。当前值以像素为单位
真实列的 SQL 百分比
我有一个表，其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询，我可以在其中按每个相应的描述进行分组，并查看 bool 值为真的次数百分比。示例表: PID Gen
caching - OrientDB中的磁盘缓存如何按读缓存和写缓存分开(百分比)
我从文档中发现，考虑到 orientdb 100% 使用磁盘缓存，它使用的最大大小为 70% 用于读取缓存，30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
Docker CPU 百分比
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗？! docker stats DOCKER_ID 显示的百分比正是我需要的，但我需要它作为变量。我需要获取容器本身内部的 cp
r - 计算数据集每列的比例(百分比)
我正在尝试计算数据集每列中类别的比例(百分比)。示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
SQL:你用什么在数据库中存储比率(百分比)？
我应该使用小数还是 float 在数据库中存储比率？特别是在 SQL2005 中。最佳答案这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误，则使用 flo
Lua:随机:百分比
我正在创建一个游戏，目前必须处理一些math.random问题。我的Lua能力不是那么强，你觉得怎么样您能制定一个使用 math.random 和给定百分比的算法吗？我的意思是这样的函数: fu
动态计算的 SQL 百分比
如何在SQL中动态计算百分比？假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
javascript - 掩码输入数字 - 百分比
如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？我不使用插件。示例:1% 或 30% 或 99% 或 100%
Python-删除字典对的比例/百分比
我正在尝试构建一个工具，可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中，按顺序对字典进行排序，然后仅保留前 3 对。我希望这个工具是可扩展的，所以我想保留前 10
mysql - 同列计算/百分比
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较，从而有效地返回从一个日期到另一个日期的用户百分比增加情况？几天来我一直在试图解决这个问题，但我已经没有想法了，
mysql - SQL - 百分比
我需要进行查询，结果是百分比。我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
javascript - AJAX图片上传时生成加载条/百分比
我有一个图像上传功能，其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
Html - 容器中的图像高度(百分比)
我的问题很简单，但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。我们有类似的东西 #containera { width: 50%; height: 50%; backgr
其他元素的 CSS 百分比
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比？例如，我想将 div 的 border-radius 指定为 div 宽度的 10%。但是，border-radius: 10% 在
html - 输入和提交按钮的大小(百分比)
我正在尝试设置按钮的大小并以百分比进行编辑但是这个的线性大小是不同的。为什么？最佳答案您好，问题出在属性 box-sizing 上.默认为 input type
html - 如何将数据可见范围更改为 % 百分比
我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。 HTML

首页

博学

6Ren·AI

商城

html - 为什么没有显示的 child 的高度百分比不起作用？