Как закрепить полукруг внизу страницы

147

27 января 2020, 00:00

Нужно закрепить внизу страницы полукруг, при этом страница не должна листаться. Как на скриншоте. Но проблема в том ,Что при разных разрешениях этот самый полукруг, то уезжает, то вообще пропадает с экрана. Пробовал различные варианты для 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%; , то полукруг пропадает вообще.

Answer 1

Пример кода с div. Полукруг 38% от экрана в высоту:

.radius { 
    height: 76vh; 
    left: 0; 
    right: 0; 
    border-radius: 50%; 
    position: fixed; 
    background-color: #cbe2ef; 
    bottom: -38vh; 
}