Сайдбар высотой 100%

Тема в разделе "Верстка", создана пользователем NikroVir, 13 окт 2014.

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

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    327
    Симпатии:
    108
    Здравствуйте.
    Нужно запилить сайдбар с высотой 100% таким образом, чтобы его выравнивание было через флоат.
    Вариант с position: absolute не подходит, т.к. вёрстка под резину, где сайдбару по итогу будет выставлен max-width.
    Заранее спасибо.

    Вот примерная структура. ничего необычного:
    [​IMG]
     
    Последнее редактирование: 13 окт 2014
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    758
    Симпатии:
    326
  3. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    327
    Симпатии:
    108
    Это не совсем то что нужно. Здесь сайдбар тянется в высоту в зависимости от того, на сколько длинный контент, а мне нужно чтобы сайдбар был всегда 100%, даже если контента мало. Т.е. мне нужен аналог этого:

    Код:
    <div calss="wrapper">
       <div class="sidebar"></div>
       <div class="content">/div>
    </div>
    
    .wrapper{position: relative;}
    .sidebar{height: 100%; width: 200px; position: absolute; left: 0px; top: 0px;}
    .content{margin-left: 200px;}
    Вариант идеальный, но мешает margin-left

    Забыл сказать: вариант с html, body, wrapper, sidebar{height: 100%;} тоже не подходит.
     
  4. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    758
    Симпатии:
    326
    Наведите на Expand column и увидите, что сайдбар тянется в высоту даже при малом кол-ве контента. Просто откройте код и разберитесь.
     
  5. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    327
    Симпатии:
    108
    я смотрел код, поэтому и сказал что вариант не подходит. там сайдбар и контент зависят друг от друга. мне же нужно чтобы сайдбар был всегда фиксированной высоты 100%, даже когда в обоих блоках мало контента.
     
  6. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    Посмотрите в сторону display: flex;
     
  7. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    327
    Симпатии:
    108
    Читал об этой технологии на хабре, но на сколько я знаю она весьма сырая.
    Ни как не могу найти нормальную спецификацию на русском. Если вы где-то видели, то поделитесь ссылочкой пожалуйста. А пока поищу сам.
     
  8. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    NikroVir и Siverus нравится это.
  9. Siverus

    Siverus Создатель

    Регистр.:
    27 сен 2014
    Сообщения:
    10
    Симпатии:
    4
    А как насчет кроссбарузерности? Я всегда старался именно из-за этого обходить flex стороной
     
  10. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    В предыдущем посте указана ссылка http://caniuse.com/#search=flexbox.
    Проблем с использованием flexbox быть не должно.
     
    Siverus нравится это.