|
Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Как растянуть блок ТОЧНО до нижнего края экрана |
|
[решено] Как растянуть блок ТОЧНО до нижнего края экрана
|
Новый участник Сообщения: 26 |
Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: "Как в css растянуть блок по вертикали?". Точнее, ответы есть, но они на элементарные случай, когда блок растягивается на 100% высоты своего родителя. Но этот и подобные способы не работают, если перед моим блоком стоит другой блок, и мне нужно, соответственно, заполнить растягиваемым блоком все пространство от его текущего положения до конца экрана. Причем мне нужно именно растянуть блок точно до правого нижнего угла, а не "обрезать" родительским блоком все, вылезло за его размеры.
Постараюсь объяснить зачем мне это нужно на простом примере: http://jsfiddle.net/ongpj2vz/ В этом примере div.header имеет изменяемую высоту, а декоративные разделители (div.separator_xxx) должны всегда начинаться строго в 50пикселях от нижней границы div.header и в заканиваться в 50 пикселях от нижней границы экрана. В примере я искусственно выровнял их снизу, зная точный размер заголовка... но стоит мне расширить/сузить высоту заголовка, и мое позиционирование "полетит", т.к. я не знаю правильных координат нижней границы div.work_area. Прошу помочь с решением... т.к. мозг уже кипит. Важно! - интересует решение на чистом CSS, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров) |
|
Отправлено: 08:26, 23-12-2014 |
![]() Сообщения: 3652
|
Профиль | Сайт | Отправить PM | Цитировать suvolod,
Цитата suvolod:
![]() Пример: Если заданы размеры родительского элемента (с классом parent) и первый дочерний элемент не покрывает их полностью - второй с классом growing-child займет всё доступное место. .parent { display: flex; flex-direction: column; /* порядок элементов */ /* height, width */ } .growing-child { flex-grow: 1; } P.S.: Здесь - неплохая ознакомительная справка по flexbox'ам, правда, на английском. |
|
------- Последний раз редактировалось Habetdin, 23-12-2014 в 23:35. Причина: P.S. Отправлено: 18:31, 23-12-2014 | #2 |
Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети. Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля. |
Новый участник Сообщения: 26
|
Профиль | Отправить PM | Цитировать спасибо... про свойство flex слышал, но никогда не использовал. теперь буду знать.
Правда, в итоге применять это свойство я пока поостерегся, т.к. только новейшие браузеры его могут поддерживать. Например, лично я сижу сейчас на FFv28 (все версии старше уже хромировались, и меня это мало устраивает.) В итоге пришлось базовую верстку сделать на табличках, вложить в каждую ячейку div-ы, и позиционироваться уже от них. |
Отправлено: 13:31, 24-12-2014 | #3 |
Ветеран Сообщения: 27449
|
Профиль | Отправить PM | Цитировать Цитата suvolod:
|
|
Отправлено: 14:32, 24-12-2014 | #4 |
![]() Сообщения: 3652
|
Профиль | Сайт | Отправить PM | Цитировать Цитата suvolod:
Цитата suvolod:
А если вы про изменения в интерфейсе - да поможет вам дополнение Classic Theme Restorer (или тема оформления вроде Simple White) |
|||
------- Отправлено: 12:05, 25-12-2014 | #5 |
![]() |
Участник сейчас на форуме |
![]() |
Участник вне форума |
![]() |
Автор темы |
![]() |
Сообщение прикреплено |
| |||||
Название темы | Автор | Информация о форуме | Ответов | Последнее сообщение | |
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 |
|