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