Как сделать одинаковый отступ для контейнера main от закрепленного футера и хедера для разных экранов?

Question

Богдан Дерий @bodia7

Начинающий веб-разработчик

Как сделать одинаковый отступ для контейнера main от закрепленного футера и хедера для разных экранов?

Всем привет. Есть сайт-одностраничник, т.е. в прямом смысле - одностраничник. Есть закрепленный хедер с меню, прижатый футер, и контейнер с информацией, без скроллов. В блоке main два небольших блока с текстом, между блоками небольшой отступ. Как задать стили так чтоб при разной высоте и ширине экрана, блок main оставался на одинаковом расстоянии от футера и хедера??? Начал писать media, ну очень много писать, и некрасиво. Тоесть, по сути, нужно центрировать вертикально блок main

<header>
</header>
	
	<main>
		<div class="container" >
			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<div class="col-lg-5 col-md-6 col-sm-8 col-xs-8 main-text">
						</div>
					</div>
					<div class="row" style="margin-top: 20px;">
						<div class="col-lg-11 col-md-11 col-sm-11 col-xs-8 annotation">

						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
	
	<footer>
		<div class="container" >
			<div class="row">
				<div class="col-lg-12 col-md-12">
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
											
					</div>					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2">
                        <div class="social-icons">            
                                       <a class="item fa fa-twitter" href="#"><p>Twitter</p></a>
									   <a class="item fa fa-facebook" href="#"><p>Facebook</p></a>
									   <a class="item fa fa-vk" href="#"><p>ВК</p></a><p></p>
									   <a class="item fa fa-youtube" href="#"><p>Youtube</p></a>
									   <a class="item fa fa-google-plus" href="#"><p>Google+</p></a>
                        </div>
					</div>					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
						
					</div>					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 footer-copyright">
						
					</div>
				</div>
			</div>
		</div>
	</footer>

html,
body {
    width: 100%;
    height: 100%;
	overflow: hidden;
}
html {
  position: relative;
  min-height: 100%;
}
header {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: #1c1c1c;
	border-bottom: 2px solid #f7bb25;
}
main {
	position: absolute;
	top: 140px;
	bottom: 30px;
	right: 0;
	left: 0;
	overflow-y: auto;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #1c1c1c;
  border-top: 2px solid #f7bb25;
}