Hello! I have a website.

And I have a problem: I do not know how to stretch the page to the end of the screen. The frame of the page wraps around the text and ends where the text ends. And I want the footer to be at the bottom and, where there is no text, let it be empty space.

This is my style.css. Below there are other lines, but they refer to the description of properties, styles of buttons, lists, and other trifles.

* { margin: 0px; padding: 0px; } html { height: 100%; } body { background-attachment: fixed; background-image: url("images/bg.jpg"); background-position: top left; background-repeat: repeat; height: 100%; margin: 0px auto; padding: 0px; width: 100%; } .bg-glad { background-attachment: fixed; background-image: url("images/page_gl.png"); background-position: top left; background-repeat: no-repeat; bottom: 0px; left: 0px; position: relative; right: 0px; top: 0px; } #wrapper (основной контейнер в котором находится все за исключение футера) { background-color: #c9f8f8; border-radius: 30px; height: auto !important; margin: 0px auto; min-height: 100%; width: 992px; } /* Header; -----------------------------------------------------------------------------*/ #header { height: 175px; } .header-img { background-image: url("images/header.jpg"); background-position: center center; background-repeat: no-repeat; border-radius: 20px 20px 0px 0px; height: 175px; position: absolute; top: 0px; width: 992px; } #zag { color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 20px; margin: 60px 0px 0px 15px; position: absolute; } #zag a { color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 30px; text-decoration: none; } #zag a:hover { color: #fcffbd; text-decoration: underline; } /* begin Flash */ #art-flash-area { border-radius: 20px; height: 175px; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 992px; } #art-flash-container { height: 248px; left: 0px; position: absolute; top: -36px; width: 992px; } #art-flash-container div.art-flash-alt { height: 30px; margin: 0px auto; position: relative; top: 36px; width: 110px; } /* Header END; -----------------------------------------------------------------------------*/ /* Middle; #middle (контейнер идущий сразу за хедером внутри wraper после хедера занимает все оставшееся пространство) { height: 1%; padding: 0 0 100px; position: relative; width: 100%; } ; #middle:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden; } ; #container (находится в нутри middle соседствует с left sidbar) { float: right; width: 100%; z-index: 3; } ; #content (контейнер внутри container содержащий контент) { background-color: #b1f6b9; display: block; margin: 5px 5px -5px 225px; overflow: auto; position: relative; top: 40px; } ; /* menu (синее меню под хедером); -----------------------------------------------------------------------------*/ .menu { background: url("images/nav.png") repeat-x; display: block; overflow: hidden; position: absolute; width: 992px; z-index: 5; } .menu ul { display: block; list-style: none; } .menu ul li { display: block; float: left; margin: 0px 10px; padding: 10px 15px; } .menu ul li a { color: #fff; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: none; } .menu ul li:hover { background: url("images/nav_hover.png") repeat-x; display: block; } .menu ul li a:hover { color: #fff; display: block; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: underline; z-index: 5; } /* Vipadayuchie menu; -----------------------------------------------------------------------------*/ #biz_menu { background: #0204a2; display: none; float: left; margin-left: 105px; position: absolute; top: 35px; z-index: 3; } #biz_menu div { display: block; padding: 2px 20px 2px 10px; } #biz_menu div:hover { background: #3983f9; } #biz_menu a { color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; } #biz_menu a:hover { color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; } #plati_menu { background: #0204a2; display: none; float: left; margin-left: 310px; position: absolute; top: 35px; z-index: 3; } #plati_menu div { display: block; padding: 2px 30px 2px 10px; } #plati_menu div:hover { background: #3983f9; } #plati_menu a { color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; } #plati_menu a:hover { color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; } #bg { background-image: url("images/vmenu1.png"); background-position: right; background-repeat: no-repeat; } #bg:hover { background-image: url("images/vmenu.png"); background-position: right; background-repeat: no-repeat; } #privat_menu { background: #0204a2; display: none; float: left; margin-left: 450px; position: absolute; top: 35px; z-index: 3; } #privat_menu span div { display: block; padding: 2px 20px 2px 10px; } #privat_menu span div:hover { background: #3983f9; } #privat_menu a { color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; } #privat_menu a:hover { color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; } #poker_menu { background: #0204a2; display: none; float: left; margin-left: 282px; margin-top: 130px; position: absolute; top: 35px; z-index: 3; } #poker_menu span div { display: block; padding: 2px 20px 2px 10px; } #poker_menu span div:hover { background: #3983f9; } #poker_menu a { color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; } #poker_menu a:hover { color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; } /* Sidebar Left (левый сайд бар находится в нутри middle); -----------------------------------------------------------------------------*/ #sideLeft { background: #b1f6b9; display: block; float: right; height: 100%; margin-right: -220px; position: relative; top: 44px; width: 215px; z-index: 1; } #calend { display: block; margin: 15px; } .zagolovok { background-image: url("images/vmenu_sb.png"); background-repeat: no-repeat; color: white; font-size: 22px; font: Georgia, Geneva, sans-serif; height: 30px; padding: 2px 0px; text-align: center; } /* Footer; -----------------------------------------------------------------------------*/ #footer { background: #b1f6b9; border-radius: 0px 0px 25px 25px; height: 50px; margin: -50px auto 0px; position: relative; width: 992px; }
  • @Krezvaa; To format the code, select it with the mouse and click on the button 101010 of the editor. - Nicolas Chabanovsky ♦

2 answers 2

 html { height: 100%; //позволит растянуть сайт на 100% высоты } body { height: 100%; //позволит растянуть сайт на 100% высоты } #wrapper { min-height: 100%; //выставляем минимальную высоту в 100% height: auto; // позволяем сайту тянуться если он больше по высоте margin: -50px auto 0; // поднимаем сайт вверх на высоту футера, тем самым освободив место под футер } #header { padding-top: 50px; //опустим содержимое хедера на высоту футера - вернув сайт на свое место } #footer { height: 50px; //задаем высоту футера margin: 0 auto; //убираем подтягивание вверх которое сейчас присутствует }

In this way, we will "stick" the footer to the bottom of the screen if there is little text on the site and drop the footer - if there is a lot of text and the site is larger than the screen. We avoid positioning at which site content climbs under the footer. Works at a fixed footer height. Also for old browsers need a few additional rules (the old FF and IE).

     .bg-glad {height: 100%;}