Why vh works and doesn t height css

0 votes

I have a very simple code, yet this problem arises frequently for me. I'm not sure why the percent doesn't affect the height, but vh does. On the other hand, width does not have this issue, and I could use percent to set it up.

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: 200%;
  width: 200%;
  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">Bug 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;
}
Jun 9 in CSS by Edureka
• 7,940 points
13 views

1 answer to this question.

0 votes
The height of an element, by default, takes the full height of the existing content, rather than the entire width of your screen. So, if you provide the height of an element as 100vh, it will take up the entire width of the screen. Now we force it to take up the entire width of the screen.
answered Jun 10 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
1 answer

Setting top and left CSS attributes

You can alternatively use the setProperty method, ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
8 views
0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21 in CSS by Edureka
• 8,460 points
20 views
0 votes
1 answer
0 votes
1 answer

CSS custom cursor doesn't work in FF/Chrome

The issue is not with your CSS ...READ MORE

answered Jun 21 in CSS by Edureka
• 8,460 points
10 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
1,728 views
0 votes
1 answer

How to have conditional elements and keep DRY with Facebook React's JSX?

Hello @kartik, Let's define a simple helping If component: var If ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
198 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
1,036 views
0 votes
1 answer

Error:setState doesn't update the state immediately

Hello @kartik, The method setState() takes a callback. And ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
3,901 views
0 votes
1 answer

Why is the CSS border-color inheriting the color property?

An element in CSS can have two ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
9 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

For controlling "cellpadding" in CSS, you can ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
9 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP