Why vh works and % doesn't? (height css)

Question

I have a very simple code and this particular problems occurs very often to me. I don't understand why the % doesn't change the height, only vh does. On the contrary, width doesn't have this problem and I could set it up with %.

This is the app component:

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

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

And its CSS:

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

This is the Headline component. Here you can see the problem:

import "./Headline.css";

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

And here is Headline's 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;
}

EDIT: Here is the index css just in case. Index has only one child component in it and it's app:

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;
}

https://stackoverflow.com/questions/4789835/setting-height-100-on-my-label-element-doesnt-work — Brendan Bond, Aug 01 '21 at 14:08
Hey Brendan, thanks for the answer but I don't know if that topic can help me in anyway. The height in Headline has a reference. It is nested in the App component which has 100% height and 100% width. Can you explain please? — WorstProgrammerEver, Aug 01 '21 at 14:15
100% height of what? `100% height` means the height of the parent element. Which in most case will be the body height which is calcualated by the content by default. As such you would need to change the default calculation of the body... — tacoshy, Aug 01 '21 at 14:41
Does this answer your question? [Setting height: 100% on my label element doesn't work](https://stackoverflow.com/questions/4789835/setting-height-100-on-my-label-element-doesnt-work) — tacoshy, Aug 01 '21 at 14:42

No one · Answer 1 · 2022-01-13T07:32:09.530

By default, elements take the full width of the screen. So width:50% would give your element 50% of the screen if no other css exists that say otherwise.

Height however, is a little different. The height of an element by default, takes the full height of the content that exist, not the 100% of your screen.

So if you say that the height of an element is 100vh, you force it to take the full height of the screen.

For example :

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

You have this html. If we say that :

.text {
   height:100%;
}

Nothing will change, as this is by default (Height is 100% of the content)

But if we say that :

.text {
   height:100vh;
}

Now we force it to take the full height of the screen.

The same would be if we said that the parent element is 100vh and the child 100%, for example :

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

Here we force the wrapper to take the full height of the screen, and by saying that the child element is 100% height, it takes the full height there is available.

score 0 · Answer 2 · answered Jan 13 '22 at 07:40

The percentage (%) is a relative unit so the resulting height depends on the height of the parent element's height.

For instance, if you consider the following example, the .container div has two parent elements: the and the element. And we all know that the default value of the height property is auto, so if we also set the height of and elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

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>

Why vh works and % doesn't? (height css)

2 Answers2