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

Тема в разделе "Верстка", создана пользователем KHyT, 16 янв 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. KHyT

    KHyT

    Регистр.:
    26 апр 2008
    Сообщения:
    328
    Симпатии:
    27
    Как прижать фотер к низу экрана
    Он почему то стремится посткачить выше
    С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;
    }
    
     
  2. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    Гугл:
    как прижать футер к низу
    Неужели так сложно, вариантов несколько десятков :facepalm:
     
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    HTML:
    
    #foter { position: fixed; bottom: 0; width:100%;}
    для футера

    или
    http://ryanfait.com/sticky-footer/

    ну а правда, вариантов достаточно
     
    KHyT нравится это.
  4. KHyT

    KHyT

    Регистр.:
    26 апр 2008
    Сообщения:
    328
    Симпатии:
    27
    А почему в IE8 все так ужасно криво и как это исправить :(
     
  5. kuzmit42

    kuzmit42 Постоялец

    Регистр.:
    9 янв 2013
    Сообщения:
    131
    Симпатии:
    31
    Вот мой вариант. Работает во всех Браузерах. Даже в 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;
    }
     
    KHyT нравится это.
  6. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    Намного проще использовать/создавать каркасы, которые можно создать тут http://csstemplater.com/
    P.S. при верстке всегда использую данный сервис, все просто и понятно
     
    Nei и mailar нравится это.
  7. arthur_

    arthur_ Писатель

    Регистр.:
    4 июл 2012
    Сообщения:
    5
    Симпатии:
    2
    советую использовать бутстрап или 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;
    }
     
    marryajane нравится это.
  8. flat73

    flat73 Постоялец

    Регистр.:
    15 авг 2008
    Сообщения:
    55
    Симпатии:
    2
    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>
     
  9. stylebig

    stylebig Создатель

    Регистр.:
    12 янв 2013
    Сообщения:
    33
    Симпатии:
    7
    Чтобы IE нормально фиксировал используйте внутренние контейнеры для содержания, а также: left: 0; right: 0; bottom: 0;
    Для верности можно написать: <!DOCTYPE html> а не:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    так браузер будет ориентироваться уже на HTML5.

    Код:
    #footer {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    }
     
    .footer-wrap {
     
    }
     
  10. Евгений Острый

    Евгений Острый Писатель

    Регистр.:
    15 мар 2012
    Сообщения:
    4
    Симпатии:
    0
    Во-первых, 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;}