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

Question

v1z @v1z

HTML
CSS

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

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

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

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

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

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

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

Подписаться 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 комментарий

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

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

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

Войти через центр авторизации

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

CSS

+2 ещё

Средний
Почему не корректно работает анимация в safari?
- 1 подписчик
- 19 часов назад
- 49 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как в webapp telegram вызвать камеру для отправки фото?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
PHP

+2 ещё

Простой
Делаю эмаилы картинки не отображаются?
- 1 подписчик
- вчера
- 97 просмотров
0

ответов
CSS

Средний
Как использовать в clip-path: path() проценты (ну и calc)?
- 1 подписчик
- вчера
- 93 просмотра
1

ответ
CSS

Простой
Стилизация скролла на iphone?
- 1 подписчик
- 18 июн.
- 81 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как сделать минификацию кода в insales?
- 1 подписчик
- 18 июн.
- 41 просмотр
1

ответ
CSS

Простой
Первый див поверх второго, и теперь во втором элементы не кликабельны, как исправить?
- 1 подписчик
- 18 июн.
- 182 просмотра
1

ответ
PHP

+1 ещё

Простой
Почему робот не видит description, хотя в коде страницы его видно?
- 2 подписчика
- 18 июн.
- 160 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как пофиксить скролл в div на iOS?
- 1 подписчик
- 17 июн.
- 75 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать также?
- 1 подписчик
- 17 июн.
- 149 просмотров
1

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

Frontend developer / HTML-верстальщик (part-time)

HRScan

от 800 до 1 000 €

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработка админки для обменника валюты - back-end PHP yii2

21 июн. 2024, в 08:53

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

Запустить тренировку нейронной сети на Google Colab TPU

21 июн. 2024, в 07:19

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

Создать простую базу на 1С

21 июн. 2024, в 06:55

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

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

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

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

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

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

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

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