Задать вопрос
@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
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Прием WebRTC через Socket io в unity c#
26 апр. 2024, в 13:12
2000 руб./за проект
Настроить AmoCrm для туристического агентства
26 апр. 2024, в 13:06
500 руб./в час
Доработка функционала десктоп приложения (CRM) для Windows
26 апр. 2024, в 13:00
30000 руб./за проект
Ещё заказы