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

Верстка 3х колоночного резина

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

  1. greenzlat

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

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Верстаю 3х колоночный макет. Задача такая: 1 и 3 колонки - фиксированной ширины, Центральная по ширине должна занимать остаток ширины экрана, все вместе соответственно width=100%.
    Так вот проблема в том:
    1. Как сделать 1 и 3 колонки по высоте 100%
    2. Как сделать так, чтобы Центральная колонка при отсутствии 1 или 3 колонки по ширине заполняла их.

    Код (Text):
    1.  
    2. <html>
    3. <body>
    4. <div id="wrapper">
    5.     <div class="header">
    6.         Шапка
    7.     </div>
    8.     <div class="menu">Тут менюшка </div>
    9.     <div id="container">
    10.         <div class="sidebar-left">
    11.             Левая колонка
    12.         </div>
    13.         <div class="sidebar-right">
    14.             Правая колонка
    15.         </div>
    16.         <div class="content">
    17.             Центральная колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонкаая колонка
    18.         </div>
    19.     </div>
    20.     <div class="clear"></div>
    21.     <div class="empty"><!-- --></div>
    22. </div>
    23. <div class="footer">
    24.     Футер
    25. </div>
    26. </body>
    27. </html>
    Код (Text):
    1.  
    2. * {
    3.     margin:0;
    4.     padding:0;
    5.     }
    6. html, body{
    7.     height:100%;
    8.    
    9.     }
    10.    
    11. #wrapper {
    12.     position:relative;
    13.     min-height:100%;
    14.     height:auto !important;
    15.     height:100%;
    16.     width:100%;
    17.     } /*  также надо задать относительное позиционирование   */
    18.  
    19. .header{
    20.     height:100px;
    21.     padding:0 30px;
    22.     }
    23. #container {
    24.     margin:0 100px;
    25.    
    26.     }
    27. .sidebar-left,.sidebar-right{
    28.     width:220px;
    29.     background:#ccc;
    30.     }
    31. .sidebar-left{
    32.     float:left;
    33.     }
    34. .sidebar-right{
    35.     float:right;
    36.     }
    37. .content{
    38.     background:#fafafa;
    39.     width: auto;
    40.     }  
    41. .empty{
    42.     height:100px;
    43.     }
    44. .footer{
    45.     position:relative;
    46.     height:100px;
    47.     margin-top:-100px;
    48.     background:#ddd
    49.     }
    Добавлено спустя 6 минут 33 секунды:
    Решил вопрос так:
    Код (Text):
    1. .content{
    2.         overflow:hidden;
    3.     }  
    Добавлено спустя 17 минут 36 секунд:
    А как сделать высоту колонок всегда 100%.
    Добавляю так:
    Код (Text):
    1.  
    2. .sidebar-left,.sidebar-right{
    3.     width:220px;
    4.     min-height:100%;
    5.     }
    Но работает только в Opera.
     
    #1 greenzlat, 20 июн 2012
  2. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    вот кстати это тот случай когда всё можно решить таблицей в одну строку =)
     
    #2 igordata, 20 июн 2012
  3. greenzlat

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

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Таким образом:
    Код (Text):
    1.  
    2. <table>
    3. <tr>
    4. <td>Левая</td>
    5. <td>Центр</td>
    6. <td>Правая</td>
    7. </tr>
    8. </table>
    И в таблице уже дивы катать? Правильно я понял?
     
    #3 greenzlat, 21 июн 2012
  4. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    угу. но это немодно очень.
     
    #4 igordata, 21 июн 2012
  5. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Та а какая разница что модно). Зато работает отлично.
    В цсс еще для таблицы прописать table-layout:fixed и вообще все отлично будет(без этой строчке могут дивы растягивать таблицу при уменьшении экрана к примеру если в ячейке изменяяющейся ширины карта при сужении экрана уменьшатся не будет без строки а отсаваться как открыли браузер)..
    С таблицей отлично когда футер есть
     
    #5 artem-Kuzmin, 22 июн 2012
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)