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

741

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

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Развернуть фрагмент

Я хотел бы #copyrightпридерживаться нижней части #container.

Могу ли я достичь этого без использования абсолютного позиционирования? Если бы свойство float поддерживало значение 'bottom', то это бы сработало, но, к сожалению, это не так.

html  css 
— Донал
источник
211
Эта ситуация является одной из причин, почему таблицы макетов еще не исчезли. Делать это со столом очень просто и работает везде. Делать это в CSS очень смешно, а кросс-браузерная поддержка так себе. Не говоря уже о том, что невозможно вспомнить, как это сделать правильно.
— Томалак
Я не понимаю вопроса. Зачем вам вообще нужно использовать абсолютное позиционирование? Имеет ли контейнер установленную высоту, независимо от содержимого, которое он содержит?
— HartleySan

Ответы:

924

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

Присвоить position:relativeк #container, а затем 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>
Развернуть фрагмент

— пользователь
источник
11
Если положение: относительное в вашем контейнере нарушает ваш дизайн, помните, что вы можете просто включить div обертки внутри контейнера с высотой 100% и добавить вместо него положение: относительно этого.
— Джек Шепард
и если это для повторяющихся элементов, которые в противном случае были бы расположены на вершине друг друга?
— Крис
6
Абсолютно позиционированный элемент ищет своего ближайшего родителя, который является абсолютным или относительным положением, чтобы определить его положение. Если все не удается, он обращается к телу (окну). Поэтому отсюда и необходимость того, чтобы родитель был относительным.
— user17753
1
добавьте нижнее поле в #container, чтобы предотвратить защиту авторских прав на содержимое страницы
— Doc Kodam
1
Подход Flexbox ниже намного лучше.
— Woohoo
345

На самом деле, принятый ответ @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 сделает нашу жизнь проще - и в целом так оно и есть - но факт в том, что даже после всех этих лет это все еще сломанный, нелогичный беспорядок. Это не может решить все проблемы. Это неполно

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

— Рик Рейли
источник
80
Похоже, лучший ответ для меня. Кроме того, вы всегда можете использовать «таблицы css» (display: table [-row / -cell]) вместо таблиц html. Это обеспечивает тот же макет без семантики.
— Чиккодоро
1
Если у вас есть сценарий PHP / другой сценарий, который генерирует вашу страницу, вы можете продублировать нижний колонтитул, используя один в качестве скрытого «спейсера» и один позиционированный абсолютно. Проставочный нижний колонтитул гарантирует, что независимо от того, сколько контента у вас в нижнем колонтитуле, он не будет подниматься по странице.
— Tyzoid
20
Для других читающих эти комментарии: это не имеет ничего общего с «гордостью» или «круто». Использование таблиц для разметки прагматично еще более болезненно, особенно для больших объемов контента. Удостовериться, что вы не пропустили тд, и просеивать так много ненужной разметки при добавлении контента - ад. Это боль, потому что мы создаем документы HTML, а не просто макеты, и если большая часть содержимого нашего документа не является табличными данными, то почему мы помещаем их в таблицы? Если нам не нравится использовать веб-технологии так, как они были задуманы, то зачем их использовать? Вместо этого используйте настольные / мобильные приложения для публикации контента
— gabe
1
@chiccodoro Я реализовал эквивалент без таблицы, который на удивление минимален, проверьте мой ответ ниже
— Hashbrown
59
Гордость не имеет значения. Таблицы не должны использоваться для разметки из-за доступности. Если вы когда-либо использовали программу чтения с экрана, вы будете знать, почему таблицы следует использовать только для табличных данных. Используйте таблицы css как состояния @chiccodoro.
— Мэтт Феллоуз
172

Подход Flexbox!

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

Пример здесь

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

Показать фрагмент кода

Решение, приведенное выше, возможно, более гибкое, но вот альтернативное решение:

Пример здесь

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Показать фрагмент кода

Как примечание, вы можете добавить префиксы поставщиков для дополнительной поддержки.

— Джош Крозье
источник
3
как насчет column-reverseродителей, так что вам вообще не нужно ничего добавлять ребенку?
— Макс Уотерман
1
Вероятно, это должен быть принятый ответ - без хаков, без абсолютного позиционирования, переполнение работает чисто, когда это необходимо (это было для меня).
— Adverbly
114

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

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!

— Hashbrown
источник
1
Ницца! Просто обратите внимание, IIRC вам нужен <!DOCTYPE>набор для того, чтобы это работало на IE (по крайней мере, <= 8); эти старые версии поддерживаются только display:table-XXXв «стандартном» режиме. Но режим стандартов также сломает много страниц, которые были разработаны, скажем, для IE6.
— Дэвид
3
Вы также можете использовать flexbox - stackoverflow.com/questions/526035/…
— Джош Крозье
2
Я нашел больше удачи с .foot{display: table-footer-group}. Мне не нужно vertical-align, heightили border-collapse.
— Джейкоб Валента
Будет ли это работать, если #containerтолько содержит #footи не другой контент?
— Утешение
кажется, что по крайней мере понадобится неразрывный пробел , @Solace
— Hashbrown
20

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

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

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

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

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

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

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

Если мы хотим, чтобы в области содержимого была полоса прокрутки, нам нужно применить немного больше магии 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>
Развернуть фрагмент

— avrahamcool
источник
2
Пожалуйста, нет, посмотрите, насколько ужасен рендеринг сейчас i.stack.imgur.com/ZP9Hw.png
— grg
7

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

— Рапли Андраш
источник
7

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

<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>

— Гари Грин
источник
1
@ Feelsbadman Пожалуйста, не меняйте код других людей в таких ответах. Если вы намеревались просто отделить CSS от HTML, обратите внимание, что вы случайно изменили код на что-то другое, возможно, обесценив ответ и, конечно же, изменив намерение автора.
— TylerH
6

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

#container {
  display: table;
}

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

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

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

— Скиппи ле Гран Гуру
источник
6

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>
Развернуть фрагмент

— Манодж Кумар
источник
5

Вы можете действительно 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;
}
— jacmkno
источник
5

Использование translateY и свойства top

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

Льготы

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

Но все еще просто обходной путь :(

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

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

— Самюэль
источник
4

Ссылка на 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>
Развернуть фрагмент

— azizarslan
источник
3

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

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

— Джек Слайт
источник
2

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

— Призрачное эхо
источник
1

Может быть, это кому-то поможет: вы всегда можете поместить 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>
— DesignConsult
источник
1 

 #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>
Развернуть фрагмент

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Развернуть фрагмент

— Анмол Ратан Мохла
источник
1

Не хочу использовать "position: absolute" для нижнего колонтитула. Тогда вы можете сделать это так:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>
Развернуть фрагмент

— Nilesh Pawar
источник
Привет нилеш; Это решение уже представлено в нескольких ответах. Обязательно прочитайте все существующие ответы на вопрос, прежде чем предоставлять новый, чтобы избежать дублирования контента!
— TylerH
1

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

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<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>
Развернуть фрагмент

— zloctb
источник
0

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

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

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

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, вы знаете)
  • Простое и понятное форматирование

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

— левит
источник
В случае с OP это решение подходит только в том случае, если #copyright имеет фиксированную высоту (тогда вы можете установить margin-top: -{element height}.
— Gajus
@Gajus: это не абсолютное и не фиксированное позиционирование. Это делает именно то, что хочет OP (независимо от высоты авторского права), с единственным исключением, что div copyright не находится в первом контейнере. ОП попросил об авторских правах наклеивать на дно контейнера, а не на страницу !!
— Левит
Извините, я имею в виду, если контейнер # контейнера имеет фиксированную высоту.
— Gajus
Если я не ошибаюсь сам, реальная проблема, которую пытается решить OP - это низ элемента, когда высота элемента определяется другим элементом, например, с комментариями jsbin.com/acoVevI/3 . Здесь вы не можете просто поместить кнопку за пределы контейнера . Для дальнейшей иллюстрации проблемы см. Jsbin.com/acoVevI/4 .
— Gajus
ОП сказал: «Я бы хотел, чтобы #copyright придерживался дна #container», так что это не совсем ясно из вопроса. Более того, это верный пример для любого случая, когда он просто должен «придерживаться дна #container». Это решение должно быть полезным, имеет чистый подход и хорошо работает для многих макетов. Например, любая страница с прокруткой контента, например stackoverflow.com ;-)
— Левит
0

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

Мне нужно было создать панель навигации, в которой были бы реальные ссылки в правом нижнем углу и случайные элементы родного брата, при этом следя за тем, чтобы сама панель растягивалась правильно, не нарушая компоновку. Я использовал элемент "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>
— Zyox
источник
0

Для тех, у кого только один дочерний элемент в контейнере, вы можете использовать подход table-celland, 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>
Развернуть фрагмент

— Хай чжан
источник
0

По данным: w3schools.com

Элемент с положением: абсолютный; позиционируется относительно ближайшего расположенного предка (вместо позиционированного относительно окна просмотра, как фиксированный).

Таким образом, вам нужно расположить родительский элемент с чем-то относительным или абсолютным и т. Д. И установить желаемый элемент в абсолютное значение, а последним установить дно в 0.

— Джонас Фрейре
источник
Это уже упоминается в принятом ответе (среди прочих).
— TylerH
-1

Div of style, position:absolute;bottom:5px;width:100%;работает, но потребовалось больше ситуации прокрутки.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
— nicejay
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.