为什么 vh 有效而 % 无效？（高度CSS）答案

【问题标题】：Why vh works and % doesn't? (height css)为什么 vh 有效而 % 无效？（高度CSS）
【发布时间】：2021-08-01 14:05:34
【问题描述】：

我有一个非常简单的代码，这个特殊问题经常发生在我身上。我不明白为什么 % 不会改变高度，只有 vh 会。反之，width就没有这个问题，我可以用%来设置。

这是应用组件：

import MainPage from "./MainPage/MainPage";
import Headline from "./Headline/Headline";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Headline />
      <MainPage />
    </div>
  );
}

还有它的 CSS：

.App {
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: white;
  display: flex;
  flex-direction: column;
}

这是标题组件。在这里你可以看到问题：

import "./Headline.css";

function Headline() {
  return (
    <div className="headline-container">
      <div className="headline">Cryprocurrency Tracker</div>
    </div>
  );
}

这是 Headline 的 css：

.headline-container {
  height: 10vh;      --------> % doesn't work, I can change the height only with vh.
  width: 100%;       --------> width however doesn't have this problem at all.
  background-color: #0060ff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-size: 30px;
  font-weight: 800;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.headline {
  height: 100%;
  width: 90%;
  display: flex;
}

编辑：这是索引 css 以防万一。索引只有一个子组件，它是应用程序：

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

【问题讨论】：

stackoverflow.com/questions/4789835/…
嘿布伦丹，感谢您的回答，但我不知道该主题是否可以帮助我。 Headline 中的高度有参考。它嵌套在具有 100% 高度和 100% 宽度的 App 组件中。你能解释一下吗？
100% 高度是什么？ 100% height 表示父元素的高度。在大多数情况下，这将是默认情况下由内容计算的身体高度。因此，您需要更改正文的默认计算...
这能回答你的问题吗？ Setting height: 100% on my label element doesn't work
是的，现在更有意义了。谢谢！

标签： html css reactjs flexbox styling

【解决方案1】：

默认情况下，元素占据屏幕的整个宽度。所以 width:50% 会给你的元素 50% 的屏幕，如果没有其他 css 存在的话。

然而，身高略有不同。默认情况下，元素的高度采用现有内容的完整高度，而不是屏幕的 100%。

所以如果你说一个元素的高度是 100vh，你就强制它占据整个屏幕的高度。

例如：

<div class="text-wrapper">
   <p class="text">Lore ipsum</p>
</div>

你有这个 html。如果我们这么说：

.text {
   height:100%;
}

什么都不会改变，因为这是默认情况下（高度是内容的 100%）

但如果我们这么说：

.text {
   height:100vh;
}

现在我们强制它占据屏幕的整个高度。

如果我们说父元素是 100vh，子元素是 100%，例如：

.text-wrapper {
   height:100vh;
}
.text {
   height:100%;
}

这里我们强制包装器占据屏幕的整个高度，并且通过说子元素是 100% 高度，它占据了可用的整个高度。

【讨论】：

【解决方案2】：

百分比 (%) 是一个相对单位，因此生成的高度取决于父元素的高度。

例如，如果您考虑以下示例，则 .container div 有两个父元素：the 和 element。而且我们都知道height属性的默认值是auto，所以如果我们把和元素的高度也设置为100%，那么容器div的高度就等于浏览器窗口的100%高度。

Source

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
    html, body {
        height: 100%;
        margin: 0px;
    }
    .container {
        height: 100%;
        background: #f0e68c;
    }
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>

【讨论】：