За последние 24 часа нас посетил 41051 программист и 1283 робота. Сейчас ищут 1276 программистов ...

Резиновая во все стороны вёрстка :)

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

  1. Freakmeister

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

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Пытаюсь сделать шаблон, который можно было бы потом использовать как для сайтов с фиксированной шириной, так и для резиновых: http://maestro-magnifico.ru/
    Как видите, body я задал background, а ширина главного дива с классом main_border, который содержит все остальные, сейчас задана в процентах. Проблема в том, что когда текст в центральном блоке сужается, футер и сам центральный блок уезжают вниз, а родительский div, который их содержит - почему-то нет. В css вкратце задано:

    [css]html {
    height: 100%;
    }

    body {
    height:100%;
    background-image:url('images/bg.gif');
    }

    .main_border {
    border:solid 1px #333333;
    width: 90%;
    height:99.7%; /* с запасом для бордеров */
    margin:0 auto;
    background-color:#FFFFFF;
    min-width: 600px;
    }[/css]
    Как сделать, чтобы главный div тоже уползал вниз?
     
  2. centnerik

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

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    Попробуй так, вроде бы то что нужно, работает
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    5. <title>Документ без названия</title>
    6. <style type="text/css">
    7. #main{
    8.     background-color:#ffc;
    9. }
    10. #rightboard, #leftboard{
    11.     width:150px;
    12.     min-height:400px;
    13. }
    14. #rightboard{
    15.     float:right;
    16. }
    17. #leftboard{
    18.     float:left;
    19. }
    20. #content{
    21.     min-height:400px;
    22.     margin:0 150px;
    23.     border-right:2px dotted #eee;
    24.     border-left:2px dotted #eee;
    25.         background-color:#cfc;
    26. }
    27. #header, #footer{
    28.     border-top:2px dotted #eee;
    29.         height:75px;
    30.         background-color:#300;
    31. }
    32. </head>
    33.  
    34. <div id="header">
    35.  
    36. </div>
    37. <div id="main">
    38.     <div id="leftboard">
    39.  
    40.     </div>
    41.     <div id="rightboard">
    42.  
    43.     </div>
    44.     <div id="content">
    45.  
    46.     </div>
    47. </div>
    48. <div id="footer">
    49.  
    50. </div>
    51. </body>
    52. </html>
    53.  
    Ну стили понятно, что свои, главное структура вложения блоков
     
  3. Freakmeister

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

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Всё, проехали... уже допёр почему это происходит и почему тут нужен JavaScript.) Мне короче нужно было, чтобы блок main_border всегда был по высоте окна. Очень странно, что CSS позволяет задать ширину объекта в процентах и она автоматически ресайзится если сузить окно браузера, а высота задаётся, но нифига не ресайзится...
     
  4. Freakmeister

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

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Омайгад!!! Заменил у main_border height: 99.7%; на min-height: 99.7%; и всё заработало как надо. о_О
     
  5. MiksIr

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

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    Эта... пади в гугл, там css column constructor ну или css конструктор колонок
    И будет счастие