За последние 24 часа нас посетили 49768 программистов и 1757 роботов. Сейчас ищут 777 программистов ...

min-height не работает.

Тема в разделе "HTML и CSS", создана пользователем greenzlat, 11 мар 2011.

  1. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    HTML:
    1.  
    3. <div id="container">
    4.     <div id="header">Хедер</div><!--END header-->
    5.     <div id="menu"> Меню </div><!--END menu-->
    6.     <div id="content">
    7.         <div id="leftsidebar"> Левый </div><!--END leftsidebar-->
    8.                 <div id="midlle">  Середина </div><!--END midlle-->
    9.                 <div id="righttsidebar"> Правый  </div><!--END righttsidebar-->
    10.               </div><!--END content-->
    11. </div><!--END container-->
    12. <div id="footer"> Футер</div><!--END footer-->
    13. </body>
    14.  
    [css]

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#024671;
    width: 100%;
    height: 100%;
    background-image:url(img/bg.png);
    }

    #content{
    margin:0 auto;
    background:#0FF;
    width:1000px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #header {
    background:url(img/header_bg.jpg) repeat-x;
    height:162px;
    overflow: auto;
    }

    #leftsidebar {
    float:left;
    width:200px;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    }
    #midlle {
    float:left;
    width:600px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }
    #rightsidebar {
    width:200px;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    }

    #footer {
    margin:0 auto;
    width:1000px;



    }
    [/css]

    Почему блок на минимальную высоту на 100% не растягивается?
     
    #1 greenzlat, 11 мар 2011
  2. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    Какой из блоков не растягивается?
    В каком браузере?
     
    #2 neverlose, 11 мар 2011
  3. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    видимо height: auto !important;
     
    #3 igordata, 11 мар 2011
  4. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    причём тут height, если речь о min-height?

    P.S.: Попробуйте добавить правило html { height: 100%; }
     
    #4 neverlose, 11 мар 2011
  5. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    бляха муха. в фаербаг не судьба заглянуть. все там на 100% растянуто =)

    верстка просто говно и сто процентов - это вот все что есть :D
     
    #5 igordata, 11 мар 2011
  6. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    #content не растягивается.

    Что именно не так в верстке? Подскажите пожалуйста? Учусь только верстать дивами.
     
    #6 greenzlat, 15 мар 2011
  7. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ну там все не так =) все. делай заново, учитывая заранее как можно больше. попробуй.
     
    #7 igordata, 15 мар 2011
  8. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    А что есть 100%?
     
    #8 Kreker, 15 мар 2011
  9. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Ну чтоб на высоту всего экрана блок растянулся, чтобы футер был всегда внизу экрана.
     
    #9 greenzlat, 16 мар 2011
  10. centnerik

    centnerik Активный пользователь

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    А собственно зачем указывать минимальную высоту в процентах ? Как правило после наполнения страницы контентом такой параметр особо и не нужен. Могу предложить, например, сделать так:
    HTML разметка:
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    6. <title>HTML сайт</title>
    7. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    8. </head>
    9.  
    11. <div id="header">
    12.     <h1>Шапка сайта</h1>
    13.     <p>XHTML+CSS</p>
    14. </div>
    15. <div id="topmenu">
    16.     <a href="#">Topmenu</a>
    17.     <a href="#">Topmenu</a>
    18.     <a href="#">Topmenu</a>
    19. </div>
    20.  
    21. <!-- Начало основного блока -->
    22. <div id="main">
    23.  
    24.     <!-- Начало блока левой панели -->
    25.     <div id="leftboard">
    26.         <p>leftboard</p>
    27.         <ul>
    28.             <li><a href="#">menuItem</a></li>
    29.             <li><a href="#">menuItem</a></li>
    30.             <li><a href="#">menuItem</a></li>
    31.             <li><a href="#">menuItem</a></li>
    32.             <li><a href="#">menuItem</a></li>
    33.         </ul>
    34.     </div>
    35.     <!-- Конец блока левой панели -->
    36.  
    37.     <!-- Начало блока правой панели -->
    38.     <div id="rightboard">
    39.         <p>rightboard</p>
    40.         <ul>
    41.             <li><a href="#">menuItem</a></li>
    42.             <li><a href="#">menuItem</a></li>
    43.             <li><a href="#">menuItem</a></li>
    44.             <li><a href="#">menuItem</a></li>
    45.             <li><a href="#">menuItem</a></li>
    46.         </ul>
    47.         <p>Новости</p>
    48.         <ul>
    49.             <li class="news">А у нас в квартире газ...<br /><a href="#">далее</a></li>
    50.             <li class="news">А у нас водопровод...<br /><a href="#">далее</a></li>
    51.         </ul>
    52.     </div>
    53.     <!-- Конец блока правой панели -->
    54.  
    55.     <!-- Начало блока контента -->
    56.     <div id="content">
    57.  
    58.     </div>
    59.     <!-- Конец блока контента -->
    60.  
    61. </div>
    62. <!-- Конец основного блока -->
    63.  
    64. <div id="footer">
    65.     <p>
    66.         <a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
    67.         <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="vcss.gif" alt="Правильный CSS!" /></a>
    68.     </p>
    69. </div>
    70. </body>
    71. </html>
    72.  
    Таблица стилей:

    [css]
    body{
    color:#eee;
    width:752px;
    margin:0 auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    img{
    border:0;
    }

    div, p, h1, h2, h3, h4, h5, h6, ul, li{
    margin:0;
    padding:0;
    }

    #header{
    color:#fc6;
    text-align:right;
    padding:0 15px 10px;
    }

    #header p{margin-top:-0.3em;}

    #topmenu{
    padding:3px 0;
    text-align:center;
    border-bottom:2px dotted #eee;
    }

    #topmenu a{
    color:#900;
    font-weight:bold;
    text-decoration:none;
    margin:0 10px;
    }

    #main{background-color:#300;}

    #rightboard, #leftboard{
    width:150px;
    min-height:400px;
    font-size:0.85em;
    }

    #rightboard{
    float:right;
    }

    #leftboard{
    float:left;
    }

    #rightboard ul, #leftboard ul{
    list-style-type:none;
    margin:10px 0;
    }

    #rightboard li, #leftboard li{
    margin:0 20px;
    padding:3px;
    }

    #rightboard p, #leftboard p{
    text-align:center;
    font-weight:bold;
    font-size:1.10em;
    }

    #content{
    /* width:600px;*/
    min-height:400px;
    margin-right:150px;
    margin-left:150px;
    border-right:2px dotted #eee;
    border-left:2px dotted #eee;
    }

    .news{
    padding-bottom:15px;
    font-size:0.85em;
    }

    .news a{font-size:0.95em;}

    #footer{
    padding:3px 10px;
    border-top:2px dotted #eee;
    font-size:0.75em;
    text-align:center;
    }

    body, #content{
    background-color:#000;
    }

    body, #header, #content, #topmenu, #rightboard a, #leftboard a{
    color:#eee;
    }

    #rightboard p, #footer, #leftboard p{
    color:#003;
    background-color:#fc6;
    }
    [/css][/html]
     
    #10 centnerik, 22 мар 2011
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)