Перейти к содержимому


× Быстрый вопрос
Пользователь месяца
Андрей WPM Андрей WPM 1-й за Июль
Очков активности: 2 142 4 темы, 90 сообщений, 14 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография Rodiola
    #1

    Rodiola (rukodelkovo.ru)
    Очков активности: 802.5 3 темы, 98 сообщений, 5 баллов репутации

  • Фотография maxnik
    #2

    maxnik (konovalovpavel.ru)
    Очков активности: 378 0 тем, 42 сообщения, 6 баллов репутации

  • Фотография Андрей WPM
    #3

    Андрей WPM (wpmaster.kz)
    Очков активности: 150 Вне конкурса за определение пользователя месяца

  • Фотография IxMaster
    #4

    IxMaster (site.ru)
    Очков активности: 139.5 3 темы, 22 сообщения, 3 балла репутации

  • Фотография lena220678
    #5

    lena220678
    Очков активности: 108 4 темы, 24 сообщения, 2 балла репутации

  • Фотография Megoydagi
    #6

    Megoydagi (24ho.ru)
    Очков активности: 93 5 тем, 16 сообщений, 2 балла репутации

  • Фотография annabum
    #7

    annabum
    Очков активности: 75 2 темы, 19 сообщений, 2 балла репутации

  • Фотография Vmir
    #8

    Vmir
    Очков активности: 57 Вне конкурса за определение пользователя месяца

  • Фотография FIvYUr
    #9

    FIvYUr (moy-evroopt.ru)
    Очков активности: 36 0 тем, 8 сообщений, 3 балла репутации

  • Фотография Constantine
    #10

    Constantine (constantine.video.blog)
    Очков активности: 31.5 3 темы, 12 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 30.07.2019
  • Яндекс выдача: 23.08.2019
Топ 5 участников по репутации


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

#1 Volevoy

Volevoy
  • Пользователь
  • 12 сообщений
  • Репутация: 0
0

Отправлено 24 Июль 2019 - 00:02

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

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

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


 

В общем, как сделать, чтобы содержимое блока уменьшалось также как и картинка?

 

  • 0

#2 Artos

Artos
  • Пользователь
  • 101 сообщений
  • Репутация: 11

Отправлено 24 Июль 2019 - 00:46

Блочные элементы всегда занимают всю доступную ширину, если не указано явно меньше, например, 50%.
В вашем случае, если убрать картинку и впечатать текст, то блок будет занимать доступную ширину и будет уменьшатся с уменьшением ширину окна или родительского блока.

Сообщение отредактировал Artos: 24 Июль 2019 - 00:47

  • 0

#3 Volevoy

Volevoy
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 24 Июль 2019 - 00:55

@Artos, только что обратил внимание, что мне важно не width, а height. Но т.к картинка уменьшается вся целиком поэтому это полезно. А вот если её нет, то блок не выполняет то что нужно. 


Сообщение отредактировал Volevoy: 24 Июль 2019 - 00:57

  • 0

#4 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 24 Июль 2019 - 02:30

@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>

  • 0

#5 Андрей WPM

Андрей WPM
  • Пользователь
  • 844 сообщений
  • Репутация: 115

Отправлено 24 Июль 2019 - 07:29

А для чего вам нужен пустой резиновый блок? В качестве динамического пробела что-ли? Так проще margin сделать в процентах, чем выдумывать велосипед.  :)


  • 0


#6 Volevoy

Volevoy
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 25 Июль 2019 - 16:02

@Андрей WPMasterKZ, margin не масштабируется.

@web-coder, похоже, что только absolute и поможет в данной ситуации.


  • 0

#7 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 25 Июль 2019 - 16:19

похоже, что только absolute и поможет в данной ситуации.
 

А вам для какой цели это нужно?

Я так понимаю, сделать адаптивный html баннер?

Или просто пустой блок?


margin не масштабируется.
 

Масштабируется, если задать его в процентах.


  • 0

#8 Volevoy

Volevoy
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 25 Июль 2019 - 16:21

А вам для какой цели это нужно? Я так понимаю, сделать адаптивный html баннер? Или просто пустой блок?

 

На странице присутствует html блок баннер, который уже в absolute. И всё, что находиться ниже него без absolute, при изменении разрешения страницы, плывёт и залезает под него, т.к эти блоки в одной секции. Пытаюсь сделать так, чтобы адаптировалось.


Сообщение отредактировал Volevoy: 25 Июль 2019 - 16:24

  • 0

#9 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 25 Июль 2019 - 16:31

Может быть в таком случае стоит отказаться от абсолютного позиционирования?


  • 0

#10 Volevoy

Volevoy
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 25 Июль 2019 - 16:44

@web-coder, Да, можно. Но тогда  "полезный контент в начале" это будет баннер. 


  • 0

#11 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 19

Отправлено 25 Июль 2019 - 16:46

Но тогда  "полезный контент в начале" это будет баннер. 
 

Закрывайте его от индексации.


  • 0

#12 Artos

Artos
  • Пользователь
  • 101 сообщений
  • Репутация: 11

Отправлено 25 Июль 2019 - 21:55

На странице присутствует html блок баннер, который уже в absolute
Можно же этому блоку написать свои правила, чтобы нижнее не лезло под него. Только может потребоваться к своим правилам добавлять !important.
  • 0

#13 Volevoy

Volevoy
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 26 Июль 2019 - 01:28

@web-coder, понял, спасибо.

@Artos, когда в блоке рандомный текст, не ясно как подстраиваться под него.


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru