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

Question

v1z @v1z

HTML
CSS

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

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

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

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

Сделал вот такой тестовый макет с описанием проблемы: vizakenjack.narod2.ru/testpage.html — CSS прописал напрямую в коде.

Вопрос задан более трёх лет назад
6057 просмотров

Комментировать

Подписаться 3 Оценить Комментировать

Решения вопроса 1

4 комментария

zayko @zayko

Извиняюсь. У вас другой случай.

Написано более трёх лет назад

zayko @zayko

Вот такой вариант я мог бы вам предложить

  <style>
    html, body {
      width:100%;
      height:100%;
    }
    .body{  
      margin:auto;
      height:auto !important;
      min-height:100%;
      height: 100%;
      border: 1px solid gold;
      position: relative;
    }
    .content{ margin: 0 210px; border: 1px solid green; position: relative; width: 480px; height: 100%; }
    .sidebar1{ width: 200px; border: 1px solid blue; position: absolute; top: 0; left: 0; height: 100%; }
    .sidebar2{ width: 200px; border: 1px solid blue; position: absolute; top: 0; right: 0; height: 100%; }
  </style>
  <body>
      <div class="body">
      <div class='sidebar1'>Sidebar 1</div>
      <div class='sidebar2'>Sidebar 2</div>
      <div class='content'>
        Content
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
      </div>
    </div><!-- body -->
  </body>

Написано более трёх лет назад

v1z @v1z Автор вопроса

У меня Content должен занимать 100% ширины, из того что осталось между двумя сайдбарами. Ваш вариант, в принципе, подходит, но если на content выставить margin-left: 200px; margin-right: 200px, width: 100% всё равно растягивается направо и перекрывает сайдбар

Написано более трёх лет назад
v1z @v1z Автор вопроса

Всё, убрал width у блока .content — стало отображаться нормально) Спасибо.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 7

1 комментарий

Комментировать

2 комментария

Комментировать

1 комментарий

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 147 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 101 просмотр
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 97 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 86 просмотров
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 36 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Разработка бота рассылок в Telegram

25 нояб. 2024, в 10:16

7000 руб./за проект

Разработать бота-краулера для парса всех каналов в телеграм в бд MySQL

25 нояб. 2024, в 09:53

14000 руб./за проект

Изменить код STM32 и конфигурацию сервиса удаленного доступа

25 нояб. 2024, в 08:57

5000 руб./за проект

Answer 1 · 2011-10-02 21:34:20

  <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>

Answer 2 · 2011-10-03 13:30:37

Поражает упертость, с которой пытаются сделать то, что элементарно реализуется через table. Зачастую код этих извращенных вариантов реализации в разы превышает вариант table>tr>td + остается вероятность, что где-то это будет смотреться не так, как задумано… Я не против div-верстки, но ко всему нужно подходить обдуманно, взвесив все плюсы и минусы.

Заранее спасибо за минуса, просто надоело, что люди придумывают себе проблему там, где ее нет. Ведь есть готовое решение, корректно работающее во всех браузерах.

Answer 3 · 2011-10-02 19:04:23

Я думаю тут
— либо использовать какой-нибудь Javascript layout
— либо просто использовать таблицу. Никакого смысла религиозно цепляться за div-ы тут нет
— можно попытаться сделать что-то с бэкграундом, но я не люблю такие варианты

Answer 4 · 2011-10-02 18:12:26

если сделать по быдлу — то можно добавить для блока контента с права и слева по бордеру, и такие же у сайдаров. А потом сайдбару сделать с одной стороны отрицательный маргин на ширину бордера чот бы тот наплывал на соседний… Может не самый красивый способ но работает)

Answer 5 · 2011-10-02 18:43:55

было более элегантное решение. есть блок контент с тооолстыми бордерами цвета сайдбара. и абсолютом вешаются сами сайдбары. минимум геморроя, чистый css, но прокатит не во всех дизайнах. мой ответ похож на Fesor'a но несколько иной.

Answer 6 · 2011-10-02 23:27:23

Петруша Укропов @artishok

кратко

Случано как-то наткнулся, может кому-то поможет layout.veselov.sumy.ua

Ответ написан более трёх лет назад

Комментировать

Answer 7 · 2011-10-03 06:15:15

dsn13 @dsn13

Посмотрите это matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks для колонок одинаковых по высоте

Ответ написан более трёх лет назад

1 комментарий

Answer 8 · 2011-10-03 11:10:08

Вот вам пара десятков способов сделать трехколоночную верстку.
В том числе фреймворки и конструкторы.

Двухколоночная — как частный случай любого из этих способов.

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

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

Минуточку внимания

Войдите на сайт