Задать вопрос
@persovt
html

Как решить эту проблему?

Помогите решить проблему с позиционированием элемента кнопки SignUp снизу блока (не fixed) в bootstrap и чтобы он был адаптивен к изменению, использование динамических единиц для отступа не подходит.
Макет:
5ef88e96d3280626502826.png
Код:


И если можете дайте советы и рекомендации по коду.
P.S Понял, что объект не позиционируется из-за размера блока, который равен размеру кнопки. Но все же может есть возможность адаптивного позиционирование снизу header?
<div class="SignUp d-flex justify-content-center ">
               <a class="btn-signup d-flex  justify-content-center align-items-center" href="">
              Sign Up
              </a>
      </div>

.SignUp{
	position: absolute;
	left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	bottom: 0;
}

Вот что сделал, но это совсем не адаптивно, все налезает, все не красиво
Заранее спасибо.
  • Вопрос задан
  • 143 просмотра
7 комментариев
Подписаться 1 Простой 7 комментариев
Решения вопроса 1
@persovt Автор вопроса
Решено! Немного запутался в коде. Решение очень простое, если кому нужно:
<body>
    	 <header  class="header"  id="header">
          <div class="container d-flex justify-content-center align-items-end">
              <div class="block d-flex align-items-center justify-content-center ">dsadas</div>
         </div>      
       </header>
  </body>

.header{
	min-width: 100vw;
	min-height: 100vh;
	background-color: #aaaa;
	background-size: cover;
	.container{
		min-height: 100vh;
	}
}
.block{
	margin-bottom: 15%; 	
	background-color: red;
}

5ef8efe8702cd817957458.png
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ручное тестирование приложения в сторах (iOS и Android)
05 нояб. 2024, в 23:19
3000 руб./за проект
Ещё заказы