Как сделать пустой резиновый div?

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость ( Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

2 страниц

1 2 >

Как сделать пустой резиновый div?

Опции

Volevoy

Topic Starter сообщение

24.7.2019, 1:02; Ответить: Volevoy

Сообщение #1

Новичок

Группа: User
Сообщений: 12
Регистрация: 24.7.2019
Поблагодарили: 0 раз
Репутация:

Здравствуйте. Подскажите пожалуйста. Как создать пустой блок, который будет занимать какое то пространство, но при этом, если уменьшать страницу, этот блок будет сужаться вместе с ней автоматически?
В данный момент, такой блок работает только когда есть картинка. Смотрите код:


<div style="width:100%;">
     <img src="img.jpg" style="width:100%;" alt="Большая картинка">
</div>

Такой код с картинкой работает след. образом: картинка плавно сужается вместе со страницей в момент её уменьшения, тем самым всё что находится вокруг (текст и другие блоки div) тоже подстраивается под это "сужение". А как сделать тоже самое, только без картинки, т.е с пустым блоком?

Ответить с цитированием данного сообщения

Artos_mw Artos_mw 24.7.2019, 1:46; Сообщений: 179 Поблагодарили: 0 раз Репутация: 19 Просмотр профиля	24.7.2019, 1:46; Ответить: Artos_mw Сообщение #2
Участник Группа: User Сообщений: 179 Регистрация: 1.2.2019 Поблагодарили: 0 раз Репутация: 19	Блочные элементы всегда занимают всю доступную ширину, если не указано явно меньше, например, 50%. В вашем случае, если убрать картинку и впечатать текст, то блок будет занимать доступную ширину и будет уменьшатся с уменьшением ширину окна или родительского блока. Сообщение отредактировал Artos - 24.7.2019, 1:47

Volevoy Topic Starter VolevoyTopic Starter 24.7.2019, 1:55; Сообщений: 12 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 24.7.2019, 1:55; Ответить: Volevoy Сообщение #3
Новичок Группа: User Сообщений: 12 Регистрация: 24.7.2019 Поблагодарили: 0 раз Репутация: 0	Artos_mw, только что обратил внимание, что мне важно не width, а height. Но т.к картинка уменьшается вся целиком поэтому это полезно. А вот если её нет, то блок не выполняет то что нужно. Сообщение отредактировал Volevoy - 24.7.2019, 1:57

icoder icoder 24.7.2019, 3:30; Сообщений: 204 Поблагодарили: 23 раза Репутация: 22 Просмотр профиля	24.7.2019, 3:30; Ответить: icoder Сообщение #4
Участник Группа: User Сообщений: 204 Регистрация: 14.6.2019 Поблагодарили: 23 раза Репутация: 22	Volevoy, есть один способ, как зафиксировать соотношение сторон блока, вне зависимости от его ширины. Вот пример <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width: 700px; max-width: 100%; position: relative; overflow: hidden; background: yellow; } .block:before{ content: ''; display: block; width: 100%; padding-bottom: 50%; } .block>div{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style> </head> <body> <div class="block"> <div>Контент блока</div> </div> </body> </html> -------------------- Промокоды на хостинг - скидки до 30%

Андрей_WPM Андрей_WPM 24.7.2019, 8:29; Сообщений: 1329 Поблагодарили: 149 раз Репутация: 166 Просмотр профиля	24.7.2019, 8:29; Ответить: Андрей_WPM Сообщение #5
Старожил Группа: User Сообщений: 1329 Регистрация: 10.3.2019 Из: Казахстан, Россия Поблагодарили: 149 раз Репутация: 166	А для чего вам нужен пустой резиновый блок? В качестве динамического пробела что-ли? Так проще margin сделать в процентах, чем выдумывать велосипед. :) -------------------- Промокоды для вебмастеров (скидки от 1 до 15%) \| Услуги: Оптимизация шаблонов WordPress

Volevoy Topic Starter VolevoyTopic Starter 25.7.2019, 17:02; Сообщений: 12 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 25.7.2019, 17:02; Ответить: Volevoy Сообщение #6
Новичок Группа: User Сообщений: 12 Регистрация: 24.7.2019 Поблагодарили: 0 раз Репутация: 0	Андрей WPMasterKZ, margin не масштабируется. web-coder, похоже, что только absolute и поможет в данной ситуации.

icoder icoder 25.7.2019, 17:19; Сообщений: 204 Поблагодарили: 23 раза Репутация: 22 Просмотр профиля	25.7.2019, 17:19; Ответить: icoder Сообщение #7
Участник Группа: User Сообщений: 204 Регистрация: 14.6.2019 Поблагодарили: 23 раза Репутация: 22	(Volevoy @ 25.7.2019, 20:02) похоже, что только absolute и поможет в данной ситуации. А вам для какой цели это нужно? Я так понимаю, сделать адаптивный html баннер? Или просто пустой блок? (Volevoy @ 25.7.2019, 20:02) margin не масштабируется. Масштабируется, если задать его в процентах. -------------------- Промокоды на хостинг - скидки до 30%

Volevoy Topic Starter VolevoyTopic Starter 25.7.2019, 17:21; Сообщений: 12 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 25.7.2019, 17:21; Ответить: Volevoy Сообщение #8
Новичок Группа: User Сообщений: 12 Регистрация: 24.7.2019 Поблагодарили: 0 раз Репутация: 0	(web-coder @ 25.7.2019, 20:14) А вам для какой цели это нужно? Я так понимаю, сделать адаптивный html баннер? Или просто пустой блок? На странице присутствует html блок баннер, который уже в absolute. И всё, что находиться ниже него без absolute, при изменении разрешения страницы, плывёт и залезает под него, т.к эти блоки в одной секции. Пытаюсь сделать так, чтобы адаптировалось. Сообщение отредактировал Volevoy - 25.7.2019, 17:24

icoder icoder 25.7.2019, 17:31; Сообщений: 204 Поблагодарили: 23 раза Репутация: 22 Просмотр профиля	25.7.2019, 17:31; Ответить: icoder Сообщение #9
Участник Группа: User Сообщений: 204 Регистрация: 14.6.2019 Поблагодарили: 23 раза Репутация: 22	Может быть в таком случае стоит отказаться от абсолютного позиционирования? -------------------- Промокоды на хостинг - скидки до 30%

Volevoy Topic Starter VolevoyTopic Starter 25.7.2019, 17:44; Сообщений: 12 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 25.7.2019, 17:44; Ответить: Volevoy Сообщение #10
Новичок Группа: User Сообщений: 12 Регистрация: 24.7.2019 Поблагодарили: 0 раз Репутация: 0	web-coder, Да, можно. Но тогда "полезный контент в начале" это будет баннер.

« Предыдущая тема · Программная часть · Следующая тема »

2 страниц

1 2 >

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Google: как удалить незаконный контент из Поиска	2	VinogradOFF	223	Вчера, 23:19 автор: WGN
Как перевести деньги с укр карти на польськую карту	11	sasiza1	417	Вчера, 22:47 автор: Kostreida
Яндекс деньги и запрет коммерческой деятельности, как понять?	21	Webranger	1572	Вчера, 22:11 автор: TABAK
Как бороться с ботами для прямых заходов на сайт?	22	duoseo	1054	Вчера, 18:11 автор: duoseo
Как получить топ10 яндекса/google в 2021 году?	13	webaleks	715	Вчера, 1:18 автор: nikitosmore

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 26.1.2021, 15:51

Дизайн