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
• 10,120 points
54 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
• 9,540 points

Related Questions In CSS

0 votes
0 answers

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

A common trick for vertical positioning elements ...READ MORE

Jul 18 in CSS by Edureka
• 10,120 points
15 views
0 votes
1 answer

CSS calc width and height values

Yes, there are CSS variables named vh ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
16 views
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
• 9,540 points
19 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
• 9,540 points
115 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,740 points
1,775 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,740 points
208 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,740 points
1,099 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,740 points
4,036 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
• 9,540 points
12 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
• 9,540 points
12 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