Как расположить div внизу своего контейнера?

Question

У меня есть следующий HTML-код:

<div id="container">
  <!-- Другие элементы здесь -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Я хотел бы, чтобы #copyright находился внизу #container. Могу ли я добиться этого без использования абсолютного позиционирования?

Answer 1

Скорее всего, нет.

Для того чтобы разместить элемент с идентификатором #copyright внизу контейнера #container, вам необходимо задать position: relative для #container, а затем использовать position: absolute; bottom: 0; для #copyright.

Вот пример кода:

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Другие элементы здесь -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Таким образом, элемент #copyright будет находиться внизу своего родительского контейнера #container.

Answer 2

На самом деле, принятое решение от @User будет работать только в случае, если окно высокое, а контент короткий. Если же контент высокий, а окно короткое, то информация о копирайте будет накладываться на контент страницы, и при прокрутке вниз вы получите плавающее уведомление о копирайте. Это делает такое решение бесполезным для большинства страниц (например, для этой страницы).

Наиболее распространенный способ решения этой проблемы — это подход "липкого подвала" с использованием CSS, который был продемонстрирован, или его немного более компактная вариация. Этот подход работает отлично — если у вас фиксированная высота подвала.

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

Согните гордость и используйте таблицу.

Например:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

Попробуйте это. Это будет работать для любого размера окна, любого объема контента и любого размера подвала на всех браузерах... даже в IE6.

Если вам не по себе от мысли использовать таблицы для разметки, сделайте минутку паузы и подумайте, почему. CSS должен был облегчить нашу жизнь — и, в целом, он это сделал — но факт остается фактом: даже после всех этих лет он по-прежнему является сломанным и непонятным инструментом. Он не может решить каждую задачу. Он неполон.

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

Answer 3

Чтобы создать ещё один контейнер div для элементов над #copyright, вам нужно добавить новый div сразу перед элементом с идентификатором copyright. Вот пример, как это можно сделать:

<div style="clear:both;"></div>
<div id="copyright">
    <!-- Содержимое вашего футера -->
</div>

Этот div с style="clear:both;" заставит ваш footer находиться под всеми остальными элементах на странице, аналогично тому, как это было бы сделано с использованием относительного позиционирования (bottom:0px;). Используя clear:both;, вы обеспечите, что футер не будет накладываться на другие элементы, которые могут использовать плавающие стили.

Такой подход поможет избежать возможных проблем с перекрытием и улучшит вёрстку страницы.

Answer 4

Попробуйте следующий код:

<div id="container">
  <div style="height: 100%; border: 1px solid #ff0000;">
    <!-- Другие элементы здесь -->
  </div>
</div>
<div id="copyright" style="position: relative; border: 1px solid #00ff00; top: -25px;">
  Copyright Foo web designs
</div>

Этот код представляет собой структуру HTML с контейнером и элементом авторских прав. Обратите внимание, что для элемента с ID copyright используется относительное позиционирование (position: relative;), что позволяет сдвинуть его на 25 пикселей вверх относительно его обычного положения. Если у вас есть дополнительные вопросы или требуется другая помощь, дайте знать!

Answer 5

Вы можете использовать сетку, назначив доступное пространство контенту в верхней части:

#container {
    display: grid;
    grid-template-rows: 1fr auto; /* 1fr занимает доступное пространство, auto - для нижнего контента */
    height: 10rem; /* или 100%, или любое другое значение */
}

<div id="container">
  Это произвольный контент.
  <div id="copyright">
    Авторские права Foo web designs
  </div>
</div>

Таким образом, основной контент будет занимать все доступное пространство, в то время как нижний блок с авторскими правами будет размещён внизу контейнера.

Как расположить div внизу своего контейнера?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных