I frequently encounter an issue with my code where using % for height doesn't work, only vh does. It's strange why height has this problem while width can be set up with %. Here is the app component I am working on:
import MainPage from "./MainPage/MainPage";
import Headline from "./Headline/Headline";
import "./App.css";
function App() {
return (
<div className="App">
<Headline />
<MainPage />
</div>
);
}
Below is the CSS for the app component:
.App {
height: 100%;
width: 100%;
text-align: center;
background-color: white;
display: flex;
flex-direction: column;
}
The problem seems to arise in the Headline component. Let's take a look at it:
import "./Headline.css";
function Headline() {
return (
<div className="headline-container">
<div className="headline">Cryprocurrency Tracker</div>
</div>
);
}
And here is the corresponding css for the Headline component:
.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;
}
Just in case, here is the CSS for the index file which only includes one child component - 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;
}