Как продлить по высоте второй блок?

Question

keche @keche

Как продлить по высоте второй блок?

Как продлить по высоте второй блок (с меню), чтобы он занимал всю высоту второго блока с контентом?

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

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

Подписаться 2 Простой Комментировать

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

5 комментариев

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

Через flex не подходит.

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

есть еще варианты, можно на jQuery сделать, можно через position: absolute, но это костыли, за которые ругаются)

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

mr_dev1l, а какой есть кастыль с absolute?

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

Все обернуть в div, у которого будет position:relative и height: auto. Далее контентная часть будет этот div растягивать по высоте, а правому блоку position: absolute;right:0;height:100%; Но не забывайте, если у вас фиксированные размеры, то блоку с контентом нужно будет задать padding-right на ширину правого блока

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

mr_dev1l, спасибо, работает.

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

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

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

5 комментариев

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

При использовании height: 100vh; не тянеться до конца все равно блок с меню.

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

keche, Дайте код, чтоб мы помогли.

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

aloky, https://jsfiddle.net/sdtL5sex/5/, желтый блок с надписью должен тянуться вниз соотвественно.

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

mr_dev1l @mr_dev1l

keche,

.container {
  width: 70%;
  background: red;
  position:relative;
}
.content {
  width: 70%;
  background: gray;
}
.menu, .content {
  display: inline-block;
  vertical-align: top;
}
.menu {
  width: 29%;
  background: yellow;
  height: 100%;
  position: absolute;
  height: 100%;
  right:0;
  top:0;
}

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

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

mr_dev1l, спасибо, работает.

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

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

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

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

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

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

CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- 10 часов назад
- 92 просмотра
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- 10 часов назад
- 55 просмотров
0

ответов
Вёрстка

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 22 часа назад
- 101 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 23 часа назад
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- вчера
- 196 просмотров
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- вчера
- 66 просмотров
1

ответ
Вёрстка

Простой
Можно ли сверстать макет без JavaScript?
- 3 подписчика
- вчера
- 636 просмотров
3

ответа
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- 14 апр.
- 59 просмотров
0

ответов
PHP

+2 ещё

Простой
Как подружить html с json?
- 1 подписчик
- 14 апр.
- 156 просмотров
1

ответ
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2387 просмотров
2

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

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

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Разработать логотип для сайта

16 апр. 2024, в 20:38

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

Доработать калькулятор, исправить ошибки (PHP, YII2)

16 апр. 2024, в 20:24

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

Приложение по учету гос номеров C#

16 апр. 2024, в 20:23

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

Answer 1 · 2018-02-16 13:50:11

mr_dev1l @mr_dev1l

Технический верстальщик

через flex

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

5 комментариев

Answer 2 · 2018-02-16 13:40:51

.menu { height: 100vh; }
И было бы легче вам помочь, если вы предоставили код.
И пример тут на глазах у тебя даже dl4.joxi.net/drive/2018/02/16/0022/1330/1500466/66...

Answer 3 · 2018-02-16 14:17:24

дай через жквери ему высоту
$(document).ready(function () {
var content_height = $('.content).outerWidth();
$('.menu').css('height', content_height);
});

Answer 4 · 2018-02-16 14:33:35

Ввиду того, что не озвучены подробные условия, смею предположить что подойдёт старая добрая имитация https://jsfiddle.net/f5yxror3/

Answer 5 · 2018-02-16 14:55:44

tyzberd @tyzberd

если еще такой вариант https://jsfiddle.net/sdtL5sex/14/

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

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

Как продлить по высоте второй блок?

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

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

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