css main content height without scrollbar - html

Question

I have tried a lot.
I do not get to 100% height without scrollbars:
/* =================== Global =================== */
*{
padding: 0px;
margin:0px;
}
html, body{
height: 100%;
background-color: #7a7a78;
font-size: 11px;
font-family: Verdana, sans-serif;
}
a{
color: #000;
text-decoration:none;
}
header{
max-width: 1000px;
margin: auto;
height: 75px;
background-color: #d0ccc9;
}
nav{
background-color: #964951;
height: 30px;
}
#nav{
max-width: 940px;
height: 30px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
section{
margin: auto;
max-width: 970px;
background-color: #d0ccc9;
padding-left: 15px;
padding-right: 15px;
height: 30px;
}
main{
margin-left:auto;
margin-right:auto;
max-width: 970px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #d0ccc9;
min-height: 150px;
height: 100%;
}
footer{
padding-left: 15px;
padding-right: 15px;
background-color: #964951;
height: 75px;
color: #fff;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
footer a{
color: #fff;
text-decoration:none;
}
enter image description here
enter image description here
can someone tell me what I did wrong?
thank you
edit: sorry, I get the css code not inserted. always the same error although everything is correct

Answer 1

Without seeing the HTML code it's hard to judge, but your main element has height: 100%;. So if there are other elements outside the main element (which is very likely from your CSS), they will add to the height, which will make the overall height more than 100%, which again causes the scrollbars.
Addition after added link to picture of HTML code in comments:
It's as I wrote above: Above main there are header , nav and section, below it, there is the footer. According to the CSS you posted all this adds up to 100% PLUS 210px (210px is the sum of all other heights according to your CSS): There's the overflow that causes the scrollbar.
The solution: Apply height: calc( 100% - 210px) to the CSS rule for main (instead of the 100% height there)