4

Я хочу, чтобы когда я масштабировал / уменьшал страницу, элемент автоматически увеличивался / уменьшался.
Мой код:

.element1 {
  width: auto;
  height: auto;
  background-color: gray;
}
<div class="element1">
</div>

Почему этот код не работает? :(

2 ответа 2

2

То что вы хотите сделать, возможно сделать несколькими способами.
Вот способ с помощью flex. Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели:

* {
  margin: 0;
  padding: 0;
}
.flex{ 
  display: flex;
  background: gray;
}
.element1 {
  width:100%;
  height: 100%;
  background: green;
  margin: 5px;
}
.element2 {
  width: 100%;
  height: 100%;
  background: red;
  margin: 5px;
}
<div class="flex">
  <div class="element1"> block 1 </div>
  <div class="element2"> block 2 </div>
</div>

Ссылки:

Используем CSS Flexible Boxes
Flexbox песочница
Flexbox Froggy шикарная визуальная песочница, для понимания принципов работы

2

Потому что auto значит: "сколько надо, чтобы поместилось содержимое и не больше".
В Вашем случае можно сделать так:

* {
  margin: 0;
  padding: 0;
}

html,
body,
.element1 {
  width: 100%;
  height: 100%;
}

.element1 {
  background: gray;
}
<div class="element1"></div>

html и body нужны, потому что 100% считаются от родителя.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.