Верстка — вытянуть два сайдбара по высоте

Имеется такая проблема на странице: если на ней мало контента (прокрутки нет), сайдбары упираются в низ, всё нормально. Если же открыта большая статья, при прокрутке страницы вниз, сайдбары «висят в воздухе». Нужно как-то прижать их.

Можно поменять проблему местами, если добавить к body position:relative. Тогда в больших статьях сайдбары упираются, а в маленьких — обрываются на моменте окончания статьи.

Пробовал и min-height, и height: auto к разным элементам. Помогла установка min-height: 1000px на #content, но это не решение проблемы, если монитор очень большой, то сайдбары всё равно висят в воздухе, а на маленьких добавляются ненужные полосы прокрутки.

Сделал вот такой тестовый макет с описанием проблемы: vizakenjack.narod2.ru/testpage.html — CSS прописал напрямую в коде.
  • Вопрос задан
  • 6000 просмотров
Решения вопроса 1
zayko
@zayko
  <style>
    .body{ width: 850x; border: 1px solid red; }
    .content{ margin: 0 210px; border: 1px solid green; position: relative; }
    .sidebar1{ width: 200px; border: 1px solid blue; position: absolute; top: 0; left: -210px; height: 100%; }
    .sidebar2{ width: 200px; border: 1px solid blue; position: absolute; top: 0; right: -210px; height: 100%; }
  </style>
  <body>
      <div class="body">
      <div class='content'>
        <div class='sidebar1'>Sidebar 1</div>
        <div class='sidebar2'>Sidebar 2</div>
        Content
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </div>
    </div><!-- body -->
  </body>
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
vladimir_gorobets
@vladimir_gorobets
PHP Web Developer
Поражает упертость, с которой пытаются сделать то, что элементарно реализуется через table. Зачастую код этих извращенных вариантов реализации в разы превышает вариант table>tr>td + остается вероятность, что где-то это будет смотреться не так, как задумано… Я не против div-верстки, но ко всему нужно подходить обдуманно, взвесив все плюсы и минусы.

Заранее спасибо за минуса, просто надоело, что люди придумывают себе проблему там, где ее нет. Ведь есть готовое решение, корректно работающее во всех браузерах.
Ответ написан
@Mox
Team Lead, RoR, React/React Native
Я думаю тут
— либо использовать какой-нибудь Javascript layout
— либо просто использовать таблицу. Никакого смысла религиозно цепляться за div-ы тут нет
— можно попытаться сделать что-то с бэкграундом, но я не люблю такие варианты
Ответ написан
Комментировать
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
если сделать по быдлу — то можно добавить для блока контента с права и слева по бордеру, и такие же у сайдаров. А потом сайдбару сделать с одной стороны отрицательный маргин на ширину бордера чот бы тот наплывал на соседний… Может не самый красивый способ но работает)
Ответ написан
dudeonthehorse
@dudeonthehorse
Email Developer
было более элегантное решение. есть блок контент с тооолстыми бордерами цвета сайдбара. и абсолютом вешаются сами сайдбары. минимум геморроя, чистый css, но прокатит не во всех дизайнах. мой ответ похож на Fesor'a но несколько иной.
Ответ написан
@artishok
кратко
Случано как-то наткнулся, может кому-то поможет layout.veselov.sumy.ua
Ответ написан
Комментировать
dsn13
@dsn13
Посмотрите это matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks для колонок одинаковых по высоте
Ответ написан
Stalker_RED
@Stalker_RED
Вот вам пара десятков способов сделать трехколоночную верстку.
В том числе фреймворки и конструкторы.

Двухколоночная — как частный случай любого из этих способов.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы