Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Как растянуть блок ТОЧНО до нижнего края экрана

Ответить
Настройки темы
[решено] Как растянуть блок ТОЧНО до нижнего края экрана

Новый участник


Сообщения: 26
Благодарности: 0

Профиль | Отправить PM | Цитировать


Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: "Как в css растянуть блок по вертикали?". Точнее, ответы есть, но они на элементарные случай, когда блок растягивается на 100% высоты своего родителя. Но этот и подобные способы не работают, если перед моим блоком стоит другой блок, и мне нужно, соответственно, заполнить растягиваемым блоком все пространство от его текущего положения до конца экрана. Причем мне нужно именно растянуть блок точно до правого нижнего угла, а не "обрезать" родительским блоком все, вылезло за его размеры.

Постараюсь объяснить зачем мне это нужно на простом примере: http://jsfiddle.net/ongpj2vz/


В этом примере div.header имеет изменяемую высоту, а декоративные разделители (div.separator_xxx) должны всегда начинаться строго в 50пикселях от нижней границы div.header и в заканиваться в 50 пикселях от нижней границы экрана.

В примере я искусственно выровнял их снизу, зная точный размер заголовка... но стоит мне расширить/сузить высоту заголовка, и мое позиционирование "полетит", т.к. я не знаю правильных координат нижней границы div.work_area.

Прошу помочь с решением... т.к. мозг уже кипит. Важно! - интересует решение на чистом CSS, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров)

Отправлено: 08:26, 23-12-2014

 

Аватара для Habetdin


Автор проектов


Сообщения: 3652
Благодарности: 1498

Профиль | Сайт | Отправить PM | Цитировать


suvolod,
Цитата suvolod:
интересует решение на чистом CSS, без скриптов»
Если вас устроит поддержка flexbox браузерами, то вот: JsFiddle. Правда странное решение делать одну половину координат позиционирования в абсолютных значениях, а вторую - в относительных
Пример: Если заданы размеры родительского элемента (с классом parent) и первый дочерний элемент не покрывает их полностью - второй с классом growing-child займет всё доступное место.
Код: Выделить весь код
.parent {
	display: flex;
	flex-direction: column; /* порядок элементов */
	/* height, width */
}

.growing-child {
	flex-grow: 1;
}
HTML код: Выделить весь код
<div class="parent"> <div>Child #1</div> <div class="growing-child">Child #2</div> </div>

P.S.: Здесь - неплохая ознакомительная справка по flexbox'ам, правда, на английском.

-------
Рекомендую: $25 на тест виртуального сервера (VPS) за регистрацию по ссылке


Последний раз редактировалось Habetdin, 23-12-2014 в 23:35. Причина: P.S.

Это сообщение посчитали полезным следующие участники:

Отправлено: 18:31, 23-12-2014 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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


Новый участник


Сообщения: 26
Благодарности: 0

Профиль | Отправить PM | Цитировать


спасибо... про свойство flex слышал, но никогда не использовал. теперь буду знать.
Правда, в итоге применять это свойство я пока поостерегся, т.к. только новейшие браузеры его могут поддерживать. Например, лично я сижу сейчас на FFv28 (все версии старше уже хромировались, и меня это мало устраивает.) В итоге пришлось базовую верстку сделать на табличках, вложить в каждую ячейку div-ы, и позиционироваться уже от них.

Отправлено: 13:31, 24-12-2014 | #3


Ветеран


Сообщения: 27449
Благодарности: 8087

Профиль | Отправить PM | Цитировать


Цитата suvolod:
(все версии старше уже хромировались, »
Вы заблуждаетесь.

Отправлено: 14:32, 24-12-2014 | #4


Аватара для Habetdin


Автор проектов


Сообщения: 3652
Благодарности: 1498

Профиль | Сайт | Отправить PM | Цитировать


Цитата suvolod:
т.к. только новейшие браузеры его могут поддерживать »
Все, что старше 2012 года - более-менее поддерживают, для современного проекта может и подойти. Разве что добавить уведомление типа Browser Update.
Цитата suvolod:
FFv28 (все версии старше уже хромировались »
Если вы имели в виду смену движка на Blink из хрома - как выше заметил Iska, это неправда - в Firefox всё еще Gecko.
А если вы про изменения в интерфейсе - да поможет вам дополнение Classic Theme Restorer (или тема оформления вроде Simple White)

-------
Рекомендую: $25 на тест виртуального сервера (VPS) за регистрацию по ссылке


Отправлено: 12:05, 25-12-2014 | #5



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Как растянуть блок ТОЧНО до нижнего края экрана

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Adobe Acrobat Pro 11, как сделать отступ от края при распечатке Черный мечник Хочу все знать 0 09-02-2013 17:57
[решено] Как уменьшить размер фотографии, не обрезая края? micro8 Цифровое изображение 3 18-01-2011 18:53
Фото на документ(фотошоп кс5), как края сделать более гладкие\естественные? HarrysFerrarievich Цифровое изображение 5 18-12-2010 08:25
Системный блок до 20 тыс. руб. baxter77 Выбор отдельных компонентов компьютера и конфигурации в целом 47 09-10-2006 09:37
Как растянуть/сжать аудио-дорожку Guyver Видео и аудио: обработка и кодирование 4 18-03-2006 14:13




 
Переход