Изменения размера элемента при масштабировании страницы

#html #css #вёрстка

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



.element1 {
  width: auto;
  height: auto;
  background-color: gray;
}






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

Ответы

Ответ 1

То что вы хотите сделать, возможно сделать несколькими способами.
Вот способ с помощью 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;
}

  
 block 1 
  
 block 2 





Ссылки:  

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


Ответ 2

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



* {
  margin: 0;
  padding: 0;
}

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

.element1 {
  background: gray;
}





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