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, 2022 in CSS by Edureka
• 13,620 points
1,714 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, 2022 by Edureka
• 12,690 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, 2022 in CSS by Edureka
• 13,620 points
855 views
0 votes
1 answer

CSS calc width and height values

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

answered Aug 4, 2022 in CSS by Tanishqa
• 1,170 points
6,737 views
0 votes
1 answer

Setting top and left CSS attributes

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
334 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, 2022 in CSS by Edureka
• 12,690 points
2,424 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,880 points
2,375 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,880 points
608 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,880 points
1,906 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,880 points
5,076 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, 2022 in CSS by Edureka
• 12,690 points
647 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
464 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP