There are explanations in the comments.
There we must, most likely, get rid of absolute positioning, as I don’t understand yet.

.head { float: left; width: 100%; background: #ddd; height: 200px; } .cont { background: #a1b1e1; position: absolute; bottom: 0; left: 0; right: 0; top: 200px; width: 100%; } .content { height: 100px; width: 500px; background: #aaa; margin: 0 auto; } 
 <div class="head"> header </div> <div class="cont"> <div class="content"> content </div> </div> <!-- cont всегда должен растягиваться не завимо от контейнера .content, и нижняя его граница всегда снизу окна браузера, даже если .content будет меньше его Дайте контейнеру .content высоту 1000 у увидите что .cont не тянется -->

jsfiddle

    3 answers 3

    Try this option , the positioning of elements has changed dramatically.

     html, body { margin: 0; padding: 0; height: 100%; } .head { position: absolute; top: 0; left: 0; width: 100%; background: #ddd; height: 100px; } .cont { margin: 0; background: #a1b1e1; width: 100%; min-height: 100%; } .push { height: 110px; } .content { height: 100px; width: 500px; background: #aaa; margin: 0 auto 0; } 
     <div class="head"> header </div> <div class="cont"> <div class="push"></div> <div class="content"> content </div> </div> <!-- cont всегда должен растягиваться не завимо от контейнера .content, и нижняя его граница всегда снизу окна браузера, даже если .content будет меньше его Дайте контейнеру .content высоту 1000 у увидите что .cont не тянется -->

      Why do you use absolute positioning for content wrapping? If this was for the purpose of preventing .head from collapsing because you gave it float: left; then add another overflow: hidden;

      Now remove the absolute positioning from your wrapper, .cont. - and the problem will be solved immediately. Also the height of .cont will be 100%.

       html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } .head { float: left; width: 100%; background: #ddd; height: 50px; } .cont { background: #a1b1e1; width: 100%; min-height: 100%; } .content { height: 300px; width: 500px; background: #aaa; margin: 0 auto; }
      • The wrapper will trim the .content to its height. - MasterAlex
      • the wrapper (.cont) will not be clipped (.content) in its height because the height in this case is set by the internal block (.content). The wrapper (.cont) will be stretched along the height of the nested block (.content). If this is not that, then I did not correctly understand the author’s task. - nosensus
      • Try in the author’s example to make a height of 1000px for .content and add overflow: hiedden for .cont, the author wants both .cont and .content to become 1000px. - MasterAlex
      • All understood now) Thanks for the clarification. I'll correct my answer now. - nosensus
      • Only there is another condition, .cont should stick to the bottom, regardless of the size of .content. - MasterAlex

      Updated answer

       * { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; height: 100%; background-color: yellow; } #wrapper { width: 100%; margin: 10px auto 0; min-height: 100%; height: auto !important; height: 100%; display: block; } header { top: 5px; position: relative; width: 100%; height: 100px; } #content { display: block; padding: 0 0 100px; position: relative; } #content:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } footer { top: 200px; width: 100%; bottom: 0; position: fixed; z-index: 150; _position: absolute; _top: expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight))); height: auto; min-height: 100px; background: blue; } .inside { display: block; max-width: 200px; height: 1000px; background: red; margin: 0 auto; } 
       <div id="wrapper"> <header> header </header> <section id="content"> <h2>Awesome content</h2> </section> <footer> <div class="inside"> hjkhkj </div> </footer> </div>

      The idea of ​​testing a custom scroll is taken from here.

      • Alas, with a small div.content height value, the div.cont container does not reach down = ( - Fikret