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

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

671 голосов
/ 08 февраля 2009

С учетом следующего HTML: 

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

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

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

Ответы [ 21 ]

842 голосов
/ 08 февраля 2009

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

Назначьте 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>
329 голосов
/ 01 февраля 2012

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

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

128 голосов
/ 07 января 2015

Подход 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>

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

107 голосов
/ 01 октября 2013

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

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!

20 голосов
/ 01 октября 2013

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

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

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

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

Так что мы будем использовать это в наших интересах. мы изменим порядок div s в HTML, теперь div #copyright находится вверху, и контент сразу же следует за ним. мы также делаем растягивание содержимого 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>
6 голосов
/ 08 февраля 2009

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

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

5 голосов
/ 19 августа 2014

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

#container {
  display: table;
}

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

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

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

5 голосов
/ 11 июля 2013

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

4 голосов
/ 11 июля 2013

Ссылка 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 голосов
/ 07 июня 2013

Вы действительно можете 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;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...