Как сделать что бы при уменьшении длины страницы длина блока уменьшалась?
Заранее спасибо за внимание! Есть красный блок со стилями:
* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 100px; } .block { width: 1000px; background-color: crimson; height: 400px; } |
* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 100px; } .block { width: 1000px; background-color: crimson; height: 400px; }
Как сделать так что бы при уменьшении длины страницы блок становился меньше в параметре height и не появлялась полоса прокрутки? Спасибо за любую помощь!
Дополнительно:
Если длина это высота, то используйте vh.
Но, наверное, в этом блоке есть что-то еще и одним вопросом дело не ограничится.
Ответы:
Во прямо хард-кодом задаёте размеры блока. Попробуйте использовать пропорциональные размеры, т.е., вместо px воспользуйтесь процентами %
- В этом и есть проблема, какой я бы процент не поставил например
height: 100%;
то фигура пропадает - Даниил Секретов, процентное соотношение определяется по отношению к родительскому компоненту, значит у вас где-то проблема с компонентами верхнего уровня
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы при уменьшении длины страницы длина блока уменьшалась, можно использовать относительные единицы измерения, такие как проценты или em.
Например, если у вас есть блок с фиксированной шириной в пикселях, и вы хотите, чтобы этот блок уменьшался пропорционально при уменьшении размера окна браузера, вы можете задать ширину блока в процентах. Например, вместо того чтобы задавать ширину блока как "300px", вы можете задать ее как "50%". Таким образом, при уменьшении размера окна браузера ширина блока будет уменьшаться пропорционально.
Пример кода на HTML и CSS:
<div class="block">Это блок с текстом</div>
.block { width: 50%; /* задаем ширину блока в процентах */ background-color: #f0f0f0; padding: 10px; margin: 0 auto; /* центрируем блок по горизонтали */ }
Таким образом, блок будет занимать 50% ширины родительского элемента, и его ширина будет уменьшаться или увеличиваться пропорционально изменению размера окна браузера.
Также можно использовать относительные единицы измерения, такие как em, чтобы создать адаптивный дизайн, который будет реагировать на изменения размера окна браузера или устройства.
Надеюсь, это поможет вам решить вашу проблему с уменьшением блока при уменьшении длины страницы. Если у вас есть дополнительные вопросы, не стесняйтесь задавать!