СSS Как прижать фотер к низу экрана ?

KHyT · 16 Янв 2013

Как прижать фотер к низу экрана
Он почему то стремится посткачить выше
СSS там конечно жеский я накалякал, но это экспериментальный первый раз

HTML:

</HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый Диз</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
 
  <div id ="wrapper">
 
      <div id ="header"></div>
      <div id ="sidebar_L"></div>
      <div id ="sidebar_R"></div>
      <div id ="rega">
      <INPUT type="text" name="text1"  value="Логин" size="20" id="name" maxlength="10" >
      <INPUT type="password" name="password1" value="Пароль" size="20" id="password" maxlength="10"  >
      </div>
      <div id ="content"></div>
      <div class ="clear"></div>
      <div id ="foter"></div>
 
  </div>
 
<body>
 
</body>
</html>

Код:

html, body {
margin: 0px;
padding: 0px;
background-image: url(../images/fon_bg.png);
 
}
 
#wrapper {
width:100%;
outline:1px;
min-height:100%;
 
 
}
 
#header {
margin :0 auto;
height:60px;
background-image: url(../images/partner_header_bg.png);
 
}
 
#sidebar_L {
height:460px;
background-color: #FFFFFF;
padding:10px;
width:195px;
outline:1px solid #000000;
float:left;
margin-left:25px;
margin-top:40px;
margin-bottom:42px;
}
 
#sidebar_R {
height:460px;
background-color: #FFFFFF;
padding:10px;
width:195px;
outline:1px solid #000000;
float:right;
margin-right:25px;
margin-top:40px;
margin-bottom:42px;
}
 
#rega{
height:90px;
background-color: #FFFFFF;
outline:1px solid #000000;
width:501px;
margin:10 auto 10 auto;
 
 
}
 
#content {
height:400px;
background-color: #FFFFFF;
outline:1px solid #000000;
background-color: ;
width:510px;
margin:20 auto 20 auto;
}
 
 
#foter {
margin:0 auto;
height:30px;
background-image: url(../images/partner_foter_bg.png);
margin-top: 40px;
 
}
.clear{
clear:both;
}

Genk0 · 16 Янв 2013

Гугл:
как прижать футер к низу
Неужели так сложно, вариантов несколько десятков :facepalm:

Шумадан · 16 Янв 2013

HTML:

#foter { position: fixed; bottom: 0; width:100%;}

для футера

или
Для просмотра ссылки Войди или Зарегистрируйся

ну а правда, вариантов достаточно

KHyT · 16 Янв 2013

А почему в IE8 все так ужасно криво и как это исправить

kuzmit42 · 16 Янв 2013

Вот мой вариант. Работает во всех Браузерах. Даже в IE6

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/template.css" type="text/css" />
<title>Заголовок</title>
 
</head>
<body>
<div class="wrapper">
  <div class="header">
      <a href="" class="logo"></a> 
  </div>   
  <div class="topmenu">
    меню
  </div>
  <div class="main">
    <div class="left_coll">
        1
    </div>   
    <div class="content">
        <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1
         
    </div> 
    <div class="right_coll">
        2
    </div>     
  </div>
  <div class="fix"></div>
</div>
<div class="footer">
    подвал 
</div>
</body>
</html>

HTML:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; /* нулевая граница */
    padding: 0; /* нулевые отступы */
    border: 0; /* больше всего для картинок в IE6 */
    outline: 0; /* точечная граница вокруг ссылок в Firefox */
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse; /* cellspacing="0" */
    border-spacing: 0;
}
body:before {/* Фикс футера в опере to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
 
 
body, html    {
    height: 100%;     
}
body    {
    font-family: Arial, Tahoma, Helvetica;
    color: #696969;
    font-size: 12px;
}
.wrapper    {
    position: relative;
    min-height: 100%;
    width: 1000px;
    margin: 0 auto;
    background: #D1DBDB;
}
* html .wrapper {
    height: 100%;
}
.footer    {
    position: relative;
    height: 50px;
    width: 1000px;
    background: #ABBEBE;
    margin: 0 auto;
    margin-top: -50px;
    clear: both;
}
.fix    {
    clear: both;
    height: 60px;
    width: 100%;
    border: #00FFFF 1px dashed;
}
.header    {
    display: inline; float: left;
    width: 1000px;
    height: 100px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #D1DBDB;
}
.logo    {
    display: inline; float: left;
    width: 100px;
    height: 50px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #ABBEBE url(../images/logo.jpg) 0 0 no-repeat;
}
.topmenu    {
    display: inline; float: left;
    width: 1000px;
    height: 30px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #66CCCC; 
}
.main    {
    display: inline; float: left;
    width: 1000px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.content    {
    display: inline; float: left;
    width: 600px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.left_coll    {
    display: inline; float: left;
    width: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #ABBEBE;
}
.right_coll    {
    display: inline; float: right;
    width: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    background: #ABBEBE;
}
.clr    {
    clear: both;
}

HeadHunter · 16 Янв 2013

Намного проще использовать/создавать каркасы, которые можно создать тут Для просмотра ссылки Войди или Зарегистрируйся
P.S. при верстке всегда использую данный сервис, все просто и понятно

arthur_ · 23 Янв 2013

советую использовать бутстрап или 960грид

один их вариантов:

HTML:

<html>
<body>
 
<div id="content">
 
  <div id="text"></div>
 
</div>
 
<div id="footer"></div>
 
</body>
</html>

HTML:

* {
  margin: 0;
  padding: 0;
}
html, body {height: 100%;}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#text {
  padding-bottom: 100px;
}
#footer {
  position: relative;
  height: 80px;
  margin-top: -80px;
}

flat73 · 28 Янв 2013

HTML:

html, body {margin: 0; padding: 0; height: 100%; width: 100%;}
.main {position: relative; _height: 100%;}
html>body .main {height: auto !important; min-height: 100% !important; }
 
 
.foother {width: 100%; position: absolute; left: 0; bottom: 0; height: 95px;}
.expand {height: 95px; clear: both;}
 
<div class="main">
  контент
  <div class="expand">&nbsp;</div>
  <div class="foother"></div>
</div>

stylebig · 31 Янв 2013

Чтобы IE нормально фиксировал используйте внутренние контейнеры для содержания, а также: left: 0; right: 0; bottom: 0;
Для верности можно написать: <!DOCTYPE html> а не:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Для просмотра ссылки Войди или Зарегистрируйся">
так браузер будет ориентироваться уже на HTML5.

Код:

#footer {
position: fixed;
width: 100%;
left: 0;
right: 0;
bottom: 0;
}
 
.footer-wrap {
 
}

Евгений Острый · 16 Фев 2013

Во-первых, footer с двумя ОО
Во-вторых, footer должен быть после врапера
И в-третьеих:

#wrapper{
height:100%;
width:1000px;
margin:0 auto;
background-color:#FFF;}

html {
height:100%;}

body {
margin:0 auto;
width:1000px;
font-size:11px;
font-family:Verdana, sans-serif;
background-color:#FFF;
height:100%;}

.footer_bg {
width:1000px;
height:29px;
text-align: center;
background:transparent url(../images/bg.gif) repeat-x left top;
clear:both;}

.footer {
vertical-align: middle;
color:#000;
padding:6px 0 0 0;}

СSS Как прижать фотер к низу экрана ?

KHyT

Знаток

Genk0

Хранитель порядка

Шумадан

Хабарра!!11

KHyT

Знаток

kuzmit42

Постоялец

HeadHunter

Shop Script

arthur_

Писатель

flat73

Постоялец

stylebig

Создатель

Евгений Острый

Писатель