Проблема с созданием стиля стиля.
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
Привет, ребята, я пытаюсь создать круг с bg-цветом. Но на основе моего стиля, который я приложил выше, работает неправильно. Высота не поднялась. Не могли бы вы рассказать мне, почему? Спасибо :)
Всегда рекомендуется указывать высоту для родителя/дедушки и бабушки, прежде чем использовать height:100% для дочернего элемента
Попробуй это
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
body{
height:100vh;
position:relative;
}
<div class="circle"></div>Если вы по-прежнему не хотите упоминать высоту элемента body (parent), вы можете определить их как это
Поскольку по умолчанию элементы div являются block элементами
Элементы блока всегда имеют ширину 100% но не определенную высоту
поэтому определите максимальную ширину фактического размера и установите его width на 100% чтобы она не уклонилась от заданной ширины.
Но когда дело доходит до высоты divs по умолчанию не имеют высоты, поэтому здесь задайте height или min-height в соответствии с требуемым значением и добавьте max-height:100% (необязательно)
Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно)
Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
.circle {
max-width: 150px;
width:100%;
max-height: 100%;
min-height:150px;
display: block;
background: #ff4040;
border-radius:100%;
} <div class="circle"></div>
Вы должны объявить высоту родительского элемента, чтобы иметь возможность использовать% -size для детей.
как например:
.parent{
height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}
Проверьте эту скрипку:
