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

Question

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

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

<div id="container">

  <!-- Other elements here -->

  <div id="copyright">

    Copyright Foo web designs

  </div>

</div>

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

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

437 4

html css

4 ответов:

Comments

Ничего не найдено.

User · Accepted Answer · 2017-06-04 06:56:12

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

присвоить position:relative до #container, а потом position:absolute; bottom:0; до #copyright.
#container {
    
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Rick Reilly · Accepted Answer · 2017-12-28 13:41:31

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

наиболее распространенный способ сделать это-продемонстрированный подход "CSS sticky footer" или a немного более тонкая вариация. Этот подход отлично работает, если у вас есть фиксированная высота футера.

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

проглотите свою гордость и используйте стол.

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

таблицы-это не круто, но по крайней мере сейчас, они иногда лучший способ решить проблема дизайна.

Josh Crozier · Accepted Answer · 2015-11-29 00:00:45

подход 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>
в качестве примечания вы можете добавить префиксы поставщиков для дополнительной поддержки.

Hashbrown · Accepted Answer · 2013-10-01 10:16:53

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

демо
Это тестируется для работы на 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!