Собственно тема уже не раз поднималась но все таки есть не понятные моменты - а именно как это можно сделать без лишних блоков и абсолютного позиционирования? Пока сделал как приведено ниже, но хотелось бы чистый html5 код без лишних #wrapper и .clear HTML: <body> <div id="wrapper"> <!-- —————-- Header —————————-- !--> <header> <h1> Шапка страницы </h1> </header> <div id="content"> <section class="s1"> </section> </div> <div class="clear"></div> </div> <!-- —————-- Footer —————————-- !--> <footer> © </footer> </body> </html> CSS: @import "reset.css"; html, body { height: 100%; } body { background: url(img/name.gif); } /* ————————————— Header ————————————— */ header{ height: 100px; background-color: aqua; } #wrapper{ min-height: 100%; height: auto !important; height: 100%; color: #000; position: relative; } #wrapper .clear { height: 100px; } .s1 { margin: 60px 0px 0px; background: rgba(0, 0, 0, 0.047); padding: 20px 0px 20px 40px; width: 200px; color: yellow; } /* ————————————— Footer ————————————— */ footer{ margin-top: -100px; height: 100px; background-color: black; } .clear{ clear: both; }
