Как я могу поместить мой div в нижней части контейнера?

Учитывая следующий HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

ОТВЕТЫ

Ответ 1

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

Назначьте position:relative #container, а затем position:absolute; bottom:0; position:absolute; bottom:0; в # #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Ответ 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>

Ответ 3

Подход к флексбоксу!

В поддерживаемых браузерах вы можете использовать следующее:

Пример здесь

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}


.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Ответ 4

Да, вы можете сделать это без позиционирования absolute и без использования table (который винт с разметкой и т.д.)

DEMO
Это проверено на работу с IE > 7, chrome, FF и очень легко добавить в существующий макет.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

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

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

Он эффективно делает то, что float:bottom, даже учитывая вопрос, указанный в ответе @Rick Reilly!

Ответ 5

Его старый вопрос, но это уникальный подход, который может помочь в нескольких случаях.

Чистый CSS, без абсолютного позиционирования, без фиксации любой высоты, кросс-браузер (IE9 +)

проверьте, что Рабочий скрипт

Поскольку нормальный поток "сверху вниз", мы не можем просто попросить div #copyright придерживаться нижней части его родителя без какого-либо позиционирования какого-то рода. Но если мы хотим, чтобы #copyright div придерживайтесь вершины своего родителя, это будет очень просто - потому что это нормальный поток.

Таким образом, мы будем использовать это в наших интересах. мы изменим порядок div в HTML, теперь div #copyright находится вверху, а содержимое сразу же следует ему. мы также делаем контент div растянутым полностью (используя псевдоэлементы и методы очистки)

теперь это просто вопрос обращения этого ордера обратно в представление. что легко можно сделать с помощью CSS-преобразования.

Мы вращаем контейнер на 180 градусов, а теперь: вверх-вниз. (и мы возвращаем обратно содержимое, чтобы выглядеть нормально)

Если мы хотим иметь scroolbar в области содержимого, нам нужно применить немного больше магии CSS. как показано Здесь [в этом примере содержимое находится ниже заголовка, но его та же идея]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

Ответ 6

Попробуйте это;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

Ответ 7

Создайте еще один контейнер div для элементов выше #copyright. Чуть выше авторских прав добавьте новый div:  <div style="clear:both;"></div> Это заставит нижний колонтитул находиться под всем остальным, как в случае использования относительного позиционирования (bottom:0px;).

Ответ 8

Хотя ни один из приведенных здесь ответов, по-видимому, не подходит или не работает в моем конкретном случае, я натолкнулся на эту статью, в которой содержится это замечательное решение:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

Я нахожу это очень полезным для применения адаптивного дизайна для мобильного дисплея без необходимости переупорядочивать весь HTML-код веб-сайта, устанавливая сам TG41 в виде таблицы.

Обратите внимание, что только первые table-footer-group или table-header-group будут отображаться как таковые: если их больше одного, остальные будут отображаться как table-row-group.

Ответ 9

Вы действительно можете align поле bottom без использования position:absolute, если знаете height #container, используя функцию выравнивания текста элементов inline-block.

Здесь вы можете увидеть его в действии.

Это код:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

Ответ 10

Ссылка на CodePen здесь.

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

Ответ 11

Используя свойство translateY и top

Просто установите дочерний элемент в позицию: относительный и перемещайте его вверх: 100% (высота 100% родителя) и придерживайтесь нижней части родительского объекта преобразованием: translateY (-100%) (что -100% от высота ребенка).

Преимущества

  • вы не берете элемент из потока страницы
  • это динамический

Но все же просто обход: (

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Не забывайте префиксы для более старого браузера.

Ответ 12

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

Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?

Ответ 13

Кроме того, если существуют условия с использованием position:absolute; или position:relative;, вы всегда можете попробовать padding parent div или поставить margin-top:x;. Не очень хороший метод в большинстве случаев, но в некоторых случаях он может пригодиться.

Ответ 14

В CSS ничего не называется float:bottom. Лучше всего использовать позиционирование в таких случаях:

position:absolute;
bottom:0;

Ответ 15

Если вы не знаете высоту дочернего блока:

    #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>

<div id="parent">
  <div class="child">child
  </div> 
  </div>

http://jsbin.com/ULUXIFon/3/edit

Если вы знаете, что высота дочернего блока добавляет дочерний блок, добавьте padding-top/margin-top:

    #parent{background:green;width:200px;height:130px;padding-top:70px;}
    .child{background:red;vertical-align:bottom;height:130px;}

<div id="parent">
  <div class="child">child
  </div> 
  </div>

Ответ 16

Возможно, это помогает кому-то: вы всегда можете поместить div за пределы другого div и затем нажимать его вверх, используя отрицательный запас:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

Ответ 17

Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваша:

Размещение символа copyright-div после контейнера-div

Вам нужно будет только форматировать div-copyright, аналогично другому контейнеру (такая же общая ширина, центровка и т.д.), и все в порядке.

CSS

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

Единственное время, когда это может быть не идеальным, - это когда ваш контейнер-div объявлен с помощью height:100%, и пользователю потребуется прокрутить вниз, чтобы увидеть авторское право. Но даже вы можете работать (например, margin-top:-20px - когда высота вашего элемента авторского права составляет 20 пикселей).

  • Абсолютное позиционирование
  • Нет расположения таблиц
  • Без сумасшедшего css, который выглядит по-разному в каждом другом браузере (ну, по крайней мере, IE, вы знаете)
  • Простой и понятный формат

Кроме того: я знаю, что OP попросил решение, которое "... придерживается нижней части" контейнера "div...", а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это один!

Ответ 18

Для тех, у кого есть только один ребенок в контейнере, вы можете использовать подход table-cell и vertical-align, который надежно работал для позиционирования одного div в нижней части его родителя.

Обратите внимание, что использование table-footer-group в качестве других упомянутых ответов приведет к нарушению расчета высоты родительского table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>

Ответ 19

CSS Grid

Поскольку использование CSS Grid увеличивается, я хотел бы предложить align-self элементу, который находится внутри контейнера сетки.

align-self может содержать любое из значений: end, self-end, flex-end для следующего примера.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

Ответ 20

Вот подход, предназначенный для создания элемента с известной высотой и шириной (по крайней мере приблизительно) с поплавком вправо и оставаясь внизу, в то время как он ведет себя как встроенный элемент к другим элементам. Он фокусируется на нижнем правом углу, потому что вы можете легко разместить его в любом другом углу с помощью других методов.

Мне нужно было создать панель навигации, в которой бы были фактические ссылки внизу справа и случайные элементы-братья, при этом гарантируя, что сам бар растягивается должным образом, не нарушая макет. Я использовал элемент "shadow", чтобы занять пространство ссылок на панели навигации и добавил его в конец дочерних узлов контейнера.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

Ответ 21

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Ответ 22

Div стиля, position:absolute;bottom:5px;width:100%; работает, Но для этого потребовалась больше ситуации с прокруткой.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}