Учитывая следующий HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>Скорее всего нет.
Назначьте 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>На самом деле, принятый ответ @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>В поддерживаемых браузерах вы можете использовать следующее:
.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> Да, вы можете сделать это без позиционирования 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!
Его старый вопрос, но это уникальный подход, который может помочь в нескольких случаях.
проверьте, что Рабочий скрипт
Поскольку нормальный поток "сверху вниз", мы не можем просто попросить 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>Попробуйте это;
<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>
Создайте еще один контейнер div для элементов выше #copyright. Чуть выше авторских прав добавьте новый div: <div style="clear:both;"></div>
Это заставит нижний колонтитул находиться под всем остальным, как в случае использования относительного позиционирования (bottom:0px;).
Хотя ни один из приведенных здесь ответов, по-видимому, не подходит или не работает в моем конкретном случае, я натолкнулся на эту статью, в которой содержится это замечательное решение:
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
Я нахожу это очень полезным для применения адаптивного дизайна для мобильного дисплея без необходимости переупорядочивать весь HTML-код веб-сайта, устанавливая сам TG41 в виде таблицы.
Обратите внимание, что только первые table-footer-group или table-header-group будут отображаться как таковые: если их больше одного, остальные будут отображаться как table-row-group.
Вы действительно можете 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;
}
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>Просто установите дочерний элемент в позицию: относительный и перемещайте его вверх: 100% (высота 100% родителя) и придерживайтесь нижней части родительского объекта преобразованием: translateY (-100%) (что -100% от высота ребенка).
Преимущества
Но все же просто обход: (
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
Не забывайте префиксы для более старого браузера.
Если вы хотите, чтобы он "прилипал" к низу, независимо от высоты контейнера, тогда абсолютное позиционирование - это путь. Конечно, если элемент авторского права является последним в контейнере, он всегда будет внизу.
Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?
Кроме того, если существуют условия с использованием position:absolute; или position:relative;, вы всегда можете попробовать padding parent div или поставить margin-top:x;. Не очень хороший метод в большинстве случаев, но в некоторых случаях он может пригодиться.
В CSS ничего не называется float:bottom. Лучше всего использовать позиционирование в таких случаях:
position:absolute;
bottom:0;
Если вы не знаете высоту дочернего блока:
#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>
Возможно, это помогает кому-то: вы всегда можете поместить 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>
Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваша:
Размещение символа 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 пикселей).
Кроме того: я знаю, что OP попросил решение, которое "... придерживается нижней части" контейнера "div...", а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это один!
Для тех, у кого есть только один ребенок в контейнере, вы можете использовать подход 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>Поскольку использование 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>Вот подход, предназначенный для создания элемента с известной высотой и шириной (по крайней мере приблизительно) с поплавком вправо и оставаясь внизу, в то время как он ведет себя как встроенный элемент к другим элементам. Он фокусируется на нижнем правом углу, потому что вы можете легко разместить его в любом другом углу с помощью других методов.
Мне нужно было создать панель навигации, в которой бы были фактические ссылки внизу справа и случайные элементы-братья, при этом гарантируя, что сам бар растягивается должным образом, не нарушая макет. Я использовал элемент "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>
#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 стиля, position:absolute;bottom:5px;width:100%; работает,
Но для этого потребовалась больше ситуации с прокруткой.
window.onscroll = function() {
var v = document.getElementById("copyright");
v.style.position = "fixed";
v.style.bottom = "5px";
}