How to make the same padding for the main container from the fixed footer and header for different screens?

Question

css

Hello. There is a one-page site, i.e. Literally, a one-pager. There is a fixed header with a menu, a pressed footer, and a container with information, without scrolls. In the main block, there are two small blocks with text, a small indent between the blocks. How to set styles so that at different height and width of the screen, the main block remains at the same distance from the footer and header??? I started writing media , well, I write a lot, and it's ugly. That is, in fact, you need to center the main block vertically

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

Answer 1

As one of the options jsfiddle.net/f48ZD/363

Answer 2

What is col-lg-3 col-md-3 col-sm-3 col-xs-3 footer-copyright). And you can ask, why bootstrap for landing?)