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

642

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

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

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

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

  • 201
    Эта ситуация является одной из причин, почему таблицы макетов еще не исчезли. Делать это со столом очень просто и работает везде. Делать это в CSS очень весело, а поддержка кроссбраузерной работы так себе. Не говоря уже о том, что невозможно вспомнить, как это сделать правильно.
  • 3
    Зачем вам нужно это делать без абсолютного позиционирования?
Показать ещё 8 комментариев
Теги:

21 ответ

774
Лучший ответ

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

Назначьте 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>
Поделиться
  • 0
    Заявление Belying @ Tomalak о том, что это «смешно сложно». Просить сделать это без всех инструментов просто не правильно.
  • 15
    Да, просто помните, что нужно положение: относительное в родительском узле, чтобы сделать текущего родителя: абсолютным по-прежнему относительно родителя.
Показать ещё 13 комментариев
321

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

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

Поделиться
  • 75
    Похоже, лучший ответ для меня. Кроме того, вы всегда можете использовать «таблицы css» (display: table [-row / -cell]) вместо таблиц html. Это обеспечивает тот же макет без семантики.
  • 0
    Заполнение: 0; margin: 0 на самом деле нужно применять только ко всем элементам td и tr.
Показать ещё 11 комментариев
112

Подход flexbox!

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

Пример здесь

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

Решение выше, вероятно, более гибкое, однако, это альтернативное решение:

Пример здесь

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


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

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

Поделиться
  • 3
    В качестве альтернативы .parent { flex-direction: colum } .child { margin-top: auto } позволяет иметь другое содержимое, например header: demo
  • 0
    @Oriol Это на самом деле лучше, чем то, что я написал. Спасибо Ориоль .. Я обновлю это в какой-то момент.
Показать ещё 5 комментариев
104

Да, вы можете сделать это без позиционирования 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!

Поделиться
  • 1
    Ницца! Просто заметьте, IIRC вам нужно установить <!DOCTYPE> чтобы это работало в IE (по крайней мере, <= 8); Эти старые версии поддерживают только display:table-XXX в режиме «Стандарты». Но режим стандартов также сломает много страниц, которые были разработаны, скажем, для IE6.
  • 1
    Я добавил & NBSP; вместо контента ...
Показать ещё 7 комментариев
21

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

Чистый 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>
Поделиться
  • 2
    Пожалуйста, нет, посмотрите, насколько ужасен рендеринг сейчас i.stack.imgur.com/ZP9Hw.png
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, обратите внимание, что вы случайно изменили код на что-то другое, возможно, обесценив ответ и, конечно, изменив намерение автора.
  • 0
    @TylerH Это больше не повторится. Мои извенения.
5

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

Поделиться
4

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

#container {
  display: table;
}

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

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

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

Поделиться
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>
Поделиться
4

Вы действительно можете 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;
}
Поделиться
2

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

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

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

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

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

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

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

Поделиться
2

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

Поделиться
2

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

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

Поделиться
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>
Поделиться
1

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

    #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>
Поделиться
0

Для тех, у кого есть только один ребенок в контейнере, вы можете использовать подход 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>
Поделиться
0 

 #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>
Поделиться
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>
Поделиться
0

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

Размещение символа 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...", а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это один!

Поделиться
  • 0
    В случае с OP это решение подходит только в том случае, если #copyright имеет фиксированную высоту (тогда вы можете установить margin-top: -{element height} .
  • 0
    @Gajus: Это не абсолютное и не фиксированное позиционирование. Это делает именно то, что хочет OP (независимо от высоты авторского права), с единственным исключением, что div copyright не находится в первом контейнере. ОП попросил об авторских правах наклеивать на дно контейнера, а не на страницу !!
Показать ещё 3 комментария
0

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

position:absolute;
bottom:0;
Поделиться
  • 0
    Во-первых, это не происходит, текст не оборачивается ...
  • 0
    Пожалуйста, объясните свой ответ.
-3

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

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню