Как разместить кнопки внизу экрана

Question

Подскажите пожалуйста как разместить кнопки внизу экрана. То есть например у меня экран размером 400px и кнопки при этом размере должны располагаться внизу а при увеличении высоты экрана например до 500px эти кнопки были также внизу но чтобы взаимодействать с ними нужно прокрутить экран. Заранее спасибо

Answer 1

Абсолютом ставим кнопку вниз блока и блоку ставим Релэтив, что бы он стал родителем кнопки в плане позиционирования.

Также написал блоку padding-bottom: 60px для того, что бы не закрывать контентом кнопку, если вдруг будет переполнение у блока, так как абсолют любит нависать над другими элементами.

.block {
  width: calc(100% - 20px);
  height: 500px;
  margin: 10px;
  border: 1px solid;
  display: block;
  position: relative;
  padding-bottom: 60px;
}
.button {
  padding: 5px 20px;
  background-color: green;
  color: white;
  text-align: center;
  display: inline-block;
  position: absolute;
  bottom: 15px;
  left: calc(50% - 42px);
}

<div class='block'>
  <div class="button">Button</div>
</div>

БЛОГ НА HUSL

Как разместить кнопки внизу экрана

Ответы (1 шт):