Нужно закрепить внизу страницы полукруг, при этом страница не должна листаться. Как на скриншоте. Но проблема в том ,Что при разных разрешениях этот самый полукруг, то уезжает, то вообще пропадает с экрана. Пробовал различные варианты для footer, но они не подходят для моего случая т.к у меня происходит смещение полукруга или он вообще пропадает
.radius {
height: 38%;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(203, 226, 239)"/></svg>') 0 0 / cover no-repeat;
margin: 15% auto;
}
<div class="radius"></div>
Сделал вот так, но теперь полукруг слишком сильно вылез, должна быть лишь его половина
.radius {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(203, 226, 239)"/></svg>') 0 0 / cover no-repeat;
display: flex;
flex-direction: column;
height: 100%;
}
<footer class="radius"></footer>
Если убрать height: 100%; и вписать widght: 100%; , то полукруг пропадает вообще.