Как сделать ширину блока в контейнере до конца окна браузера?

Ссылка скопирована
CSS HTML PHP
1 ответ

Как можно сделать блок .map шириной до конца правой стороны окна браузера. Проблема в том что этот блок лежит в колонке а она в фиксированном контейнере который выровнен по ширине. Причем блок .map не должен выходить за рамки окна браузера при любом изменении ширины окна.

Тут пример

https://codepen.io/woxit/pen/YzBKjyo

Дополнительно:

Ответы:

Если ничего не менять в вашей вёрстке, на ум приходит только вариант вот такой (добавить блок map-inner внутрь map):

.content {   height: 100vh; } .map {   max-height: 100vh;   background-color: #eee; } .map-inner {   margin-top: 8px;   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 50%;   background-color: #23fe12; }

.content { height: 100vh; } .map { max-height: 100vh; background-color: #eee; } .map-inner { margin-top: 8px; position: absolute; top: 0; right: 0; bottom: 0; left: 50%; background-color: #23fe12; }

Но это будет работать только если у вас нет необходимости задавать в абсолютных единицах высоту .content, как это было сделано в вашем примере. А также если у вас отступ от верхней части не меняется (поскольку тут используется абсолютное позиционирование).

А лично я бы вовсе по другому сделал. Кмк тут логичнее сделать вот так:

<div class="container"> 	<div class="row">     <div class="map"></div> 		<div class="col"> 			<div class="content">content</div> 		</div> 	</div> </div>  .container {   max-width: 400px;   margin: 0 auto; } .row {   display: flex; } .col {   flex: 1 1 60%;   border: 1px solid #aaa; } .content {   height: 1000px; } .map {   height: 100%;   max-height: 100vh;   position: fixed;   top: 0;   bottom: 0;   right: 0;   left: 50%;   background-color: #eee; }

<div class="container"> <div class="row"> <div class="map"></div> <div class="col"> <div class="content">content</div> </div> </div> </div> .container { max-width: 400px; margin: 0 auto; } .row { display: flex; } .col { flex: 1 1 60%; border: 1px solid #aaa; } .content { height: 1000px; } .map { height: 100%; max-height: 100vh; position: fixed; top: 0; bottom: 0; right: 0; left: 50%; background-color: #eee; }

И от этого уже отталкивался бы...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Алексей Денисов Ответ

Для того чтобы сделать ширину блока в контейнере до конца окна браузера, можно использовать CSS свойство `width: 100vw`. Это свойство устанавливает ширину элемента в процентах от ширины видимой области окна браузера.

Пример использования в HTML и CSS:

<div class="container">
  <div class="block"></div>
</div>

<div class="container"> <div class="block"></div> </div>

.container {
  width: 100vw;
}
 
.block {
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
}

.container { width: 100vw; } .block { width: 100%; height: 100px; background-color: #f0f0f0; }

В данном примере контейнер будет занимать всю видимую ширину окна браузера, а блок внутри контейнера будет занимать всю ширину контейнера.

Таким образом, используя `width: 100vw` для контейнера и `width: 100%` для блока внутри него, можно добиться того, чтобы ширина блока в контейнере была до конца окна браузера.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ