A
A
AE422020-09-19 11:43:14
css
AE42, 2020-09-19 11:43:14

How to fill the void in height?

Good afternoon!
How to fill the rest of the space in height?
At the same time, margins should be preserved and there should be no scroll
height: 100vh; does not help, a scroll appears.

Example:

Answer the question

In order to leave comments, you need to log in

3 answer(s)
B
Boris Shpakovsky, 2020-09-19
@AE42

height: 100vh; does not help, scroll appears

The thing is, the browser doesn't take into account the height of your navbar. It must be subtracted from the height of the display. This is done using the calc() function;
In your case it will look like this:
.main {
  display: flex;
  height: calc(100vh - 56px);
}

S
Samuel_Leonardo, 2020-09-19
@Samuel_Leonardo

Clean up browser default styles,

body{
margin:0;
}

you can use libraries like reset.css or normalize.css

A
Artem Zolin, 2020-09-19
@artzolin

Add

body {
    overflow: hidden;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question