Как поместить div в нижней части страницы, но переместить его, если страница переполнена [РЕШЕНО]

#html #css #position

Вопрос:

Я создаю html-страницу, на которой по умолчанию будет несколько разделителей вверху, некоторое пустое пространство, а затем еще один раздел в нижней части страницы. Я могу использовать фиксированное или абсолютное положение, чтобы div оставался внизу. Разделы «studentcontainer» должны начинаться с тонкого значения, означающего, что они не занимают всего места на странице. Я хотел бы, чтобы div «buttoncontainer» оставался в нижней части страницы с некоторым пробелом над ним, ЕСЛИ ТОЛЬКО «studentcontainers» не будут расширены, и в этом случае я хотел бы, чтобы «buttoncontainer» был перемещен вниз по странице без пробелов над ним (за исключением небольшого поля, которое я установил).

Без какого-либо позиционирования нижний div с кнопками плавает прямо под другими дивами, чего я не хочу.

С положением: абсолютное div начинается в нужном месте (не обращайте внимания на странный размер)…

Но затем, когда вышеуказанные дивы будут расширены, держатель кнопки останется там, где он есть, и перекрывает другие дивы

РЕШЕНИЕ: То, что я сделал, это создал еще один div, который является родительским для всех div на странице, КРОМЕ «buttoncontainer», затем я задал высоту этого контейнера: авто, а также установил минимальную высоту, достаточную для нажатия кнопок внизу.

Ответ №1:

Хорошо, во-первых, не используйте

 position: fixed;

Воспользуйся

 position: absolute;

Теперь не используйте верхний и левый.
Вместо этого используйте нижнюю и левую части

 bottom: 10px;
left: 0;

Я думаю, что это должно сработать
(Когда страница расширится, div все равно будет прилипать к нижней части)

Если это не то, что вы хотите, то получите высоту других дивов и соответственно установите положение вашего дива

Ответ №2:

Если вы можете поделиться своим кодом, я могу помочь вам лучше, но, насколько я понимаю из вашего объяснения, вы хотите, чтобы кнопки «Отмена» и «Продолжить» всегда оставались внизу. Поэтому я создал для вас образец. Проверьте вырезанное ниже, если это то, что вы хотите.

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

    /* Check these codes */
    html, body {
      margin: 0;
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    header,
    footer {
      flex: none;
      background-color: yellow;
      padding: 10px;
    }
    main {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      flex: auto;
    }

    /* These are not related to your topic it's just for styling */
    .some-divs {
      padding: 20px;
      margin: 20px;
      background-color: lightgrey;
    }
    .btn-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row;
    }
    .btn {
      height: 40px;
      width: 100px;
      border-radius: 5px;
      border: 1px solid black;
      background-color: DodgerBlue;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
    }
  </style>
  <title>Template</title>
</head>
<body>
  <header>
    This is header
  </header>
  <main>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
  </main>
  <footer>
    <div class="btn-container">
      <button class="btn" type="button" name="button">Cancel</button>
      <button class="btn" type="button" name="button">Continue</button>
    </div>
  </footer>
</body>
</html>

1. Спасибо за ответ, это не совсем то, что я пытался сделать. Я искал способ по умолчанию разместить кнопки внизу страницы, даже если выше нет дивов, чтобы они там оставались. Затем я хотел, чтобы кнопки нажимались вниз, если страница переполнится. Я нашел решение и добавил его в свой пост.

2. Хорошо, теперь я понимаю вашу цель. Это хорошо, если вы решите проблему.