Растягивающийся блок внутри блока на всю высоту окна

@eightalex · Регистрация: 28.04.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте, есть родительский блок, занимающий 100% высоты и 100% ширины окна, в нем находятся три фиксированных по высоте блока, два внизу и один наверху. Нужно чтобы оставшееся пространство занимал четвертый блок, как это можно реализовать?

Растягивающийся блок внутри блока на всю высоту окна

@Qwertiy · 28.04.2015, 22:55

Раз высоты фиксированные, то можно просто абсолютным позиционированием.

@Lazy_Den · 28.04.2015, 23:16

eightalex, можно с помощью flexbox-а. Проверяем в песочнице.

CSS

.parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #c44942;
    color: #fff;
}
.parent > div {
    outline: 1px solid #fff;
}
.parent > div:nth-child(2) {
    flex: 1 auto;
}
.parent > div:not(:nth-child(2)) {
    flex: 0 auto;
    height: 100px;
}

@Qwertiy · 28.04.2015, 23:35

Lazy_Den, css упрощается до

CSS

.parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #c44942;
    color: #fff;
}
 
.parent > div {
    flex: 0 auto;
    height: 100px;
    outline: 1px solid #fff;
}
 
.parent > div:nth-child(2) {
    flex: 1 auto;
}

http://jsfiddle.net/hv87ske0/1/

Добавлено через 2 минуты
А для более точного соответствия твоему варианту:

CSS

.parent > div:nth-child(2) {
    flex: 1 auto;
    height: auto;
}

http://jsfiddle.net/hv87ske0/2/

@Fedor92 · 28.04.2015, 23:35

Не по теме:

Qwertiy, интересно, чем он упростился...? :)

@Qwertiy · 28.04.2015, 23:36

Убиранием :not

@Fedor92 · 28.04.2015, 23:37

Не по теме:

Qwertiy, да 3 байта однозначно перегрузят сервер...:D

@Qwertiy · 28.04.2015, 23:53

У :not производительность плохая. Ну про поддержку промолчу, потому что у flexbox'а она хуже. И вообще, зачем городить сложные селекторы, когда всё решается перестановкой простых?

@Fedor92 · 29.04.2015, 00:46

Сообщение от Qwertiy

У :not производительность плохая. Ну про поддержку промолчу, потому что у flexbox'а она хуже. И вообще, зачем городить сложные селекторы, когда всё решается перестановкой простых?

Qwertiy, ну дык предложите своё решение без flexbox и сложных селекторов... Критиковать чужой подход проще всего...
Я бы например, вообще не заморачивался, задал бы четвёртому блоку height:auto или вообще не задал высоты и не парился...

@Qwertiy · 29.04.2015, 01:03

Сообщение от Fedor92

ну дык предложите своё решение

Я ж уже предложил: абсолютное позиционирование и 4 координаты.

@eightalex · 11.07.2015, 14:34 **[ТС]**

Lazy_Den, Qwertiy, спасибо большое вам. Все классно работало, до тех пор пока у меня не появилась необходимость поддержки старыми мобильными браузерами. По какой причине этот пример не может работать, например, в Опере Мини (даже в новой)? И как эту неприятность можно было бы исправить?

Может какие-то префиксы какие-то помогут, или придется отказаться от флексбокса? Если да, то как иначе реализовать данный пример?

@eightalex 0 / 0 / 0 Регистрация: 28.04.2015 Сообщений: 15
		1
	Растягивающийся блок внутри блока на всю высоту окна 28.04.2015, 15:36. Показов 2970. Ответов 10 Метки нет (Все метки) Здравствуйте, есть родительский блок, занимающий 100% высоты и 100% ширины окна, в нем находятся три фиксированных по высоте блока, два внизу и один наверху. Нужно чтобы оставшееся пространство занимал четвертый блок, как это можно реализовать? 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	28.04.2015, 22:55	2
	Раз высоты фиксированные, то можно просто абсолютным позиционированием. 0

@Fedor92
	28.04.2015, 23:35 #5
	Не по теме: Qwertiy, интересно, чем он упростился...? :) 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	28.04.2015, 23:36	6
	Убиранием :not 0

@Fedor92
	28.04.2015, 23:37 #7
	Не по теме: Qwertiy, да 3 байта однозначно перегрузят сервер...:D 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	28.04.2015, 23:53	8
	У :not производительность плохая. Ну про поддержку промолчу, потому что у flexbox'а она хуже. И вообще, зачем городить сложные селекторы, когда всё решается перестановкой простых? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	29.04.2015, 00:46	9
	Сообщение от Qwertiy У :not производительность плохая. Ну про поддержку промолчу, потому что у flexbox'а она хуже. И вообще, зачем городить сложные селекторы, когда всё решается перестановкой простых? Qwertiy, ну дык предложите своё решение без flexbox и сложных селекторов... Критиковать чужой подход проще всего... Я бы например, вообще не заморачивался, задал бы четвёртому блоку height:auto или вообще не задал высоты и не парился... 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	29.04.2015, 01:03	10
	Сообщение от Fedor92 ну дык предложите своё решение Я ж уже предложил: абсолютное позиционирование и 4 координаты. 0

@eightalex 0 / 0 / 0 Регистрация: 28.04.2015 Сообщений: 15
	11.07.2015, 14:34 [ТС]	11
	Lazy_Den, Qwertiy, спасибо большое вам. Все классно работало, до тех пор пока у меня не появилась необходимость поддержки старыми мобильными браузерами. По какой причине этот пример не может работать, например, в Опере Мини (даже в новой)? И как эту неприятность можно было бы исправить? Может какие-то префиксы какие-то помогут, или придется отказаться от флексбокса? Если да, то как иначе реализовать данный пример? 0

Опции темы