Як я можу розташувати свою діву на дні її контейнера?

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

Відповіді:

921

Ймовірно, ні.

Присвоїти 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>
Розгорніть фрагмент

— Користувач
джерело
10
Якщо позиція: відносно контейнера порушує ваш дизайн, пам’ятайте, що ви можете просто включити обгортковий роздільник всередині контейнера зі 100% висотою, а замість цього додайте позицію: відносно.
— Джек Пастух
а якщо це для повторюваних елементів, які б інакше були розміщені поверх іншого?
— CRice
6
Абсолютно розташований елемент прагне, щоб його найближчий батько був абсолютним або відносним, щоб визначити його положення. Якщо все не вдається, вдається до тіла (вікна). Отже, звідси потреба батька бути відносною.
— користувач17753
1
додайте поле донизу до #container, щоб запобігти авторським правам на вміст сторінки
— Doc Kodam
1
Підхід Flexbox нижче є набагато кращим.
— woohoo
345

Насправді прийнята відповідь від @User працюватиме лише в тому випадку, якщо вікно високе і вміст короткий. Але якщо вміст високий, а вікно коротке, він розмістить інформацію про авторські права над вмістом сторінки, а потім прокрутіть униз, щоб побачити вміст, залишить вас плаваючим повідомленням про авторські права. Це робить це рішення непотрібним для більшості сторінок (як, наприклад, ця сторінка).

Найпоширеніший спосіб зробити це продемонстрований підхід "CSS sticky footer" або дещо стрункіший варіант. Такий підхід працює чудово - ЯКЩО у вас колонтитул з фіксованою висотою.

Якщо вам потрібен колонтитул змінної висоти, який з’явиться внизу вікна, якщо вміст занадто короткий, а внизу вмісту, якщо вікно занадто коротке, що ви робите?

Проковтніть свою гордість і використовуйте стіл.

Наприклад:

* {
    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-скрипт / інший сценарій, який генерує вашу сторінку, ви можете дублювати колонтитул, використовуючи один як прихований "спейсер" і один розміщений абсолютно. Роздільний нижній колонтитул гарантує, що незалежно від того, скільки вмісту у вашому нижньому колонтитулі він не перейде на сторінку.
— Тизоїд
20
Для інших, хто читає ці коментарі: це не має нічого спільного з "гордістю" або "крутим". Використання таблиць для компонування є прагматично ще більш болючим, особливо для великої кількості контенту. Переконайтесь, що ви не пропустите td і просіли через стільки нерелевантну розмітку, додаючи вміст - це пекло. Це болі, що ми створюємо HTML- документи не просто макети, і якщо більша частина вмісту нашого документа не є табличними даними, то чому ми ставимо їх у таблиці? Якщо нам не подобається використовувати веб-технології так, як вони мали на увазі, то навіщо їх використовувати? Використовуйте настільні / мобільні додатки для публікації вмісту, а саме
— 1313
1
@chiccodoro Я реалізував еквівалент без таблиць, який на диво мінімальний, перевірте мою відповідь нижче
— Hashbrown
59
Гордість не має значення. Таблиці не слід використовувати для планування через причини доступності. Якщо ви коли-небудь використовували зчитувач екрану, ви дізнаєтесь, чому таблиці слід використовувати лише для табличних даних. Використовуйте таблиці css як @chiccodoro.
— Matt Fellows
170

Flexbox підхід!

У підтримуваних браузерах ви можете використовувати такі:

Приклад тут

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

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

Наведене вище рішення, ймовірно, є більш гнучким, однак, ось альтернативне рішення:

Приклад тут

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

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

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

— Джош Крозьє
джерело
3
як щодо column-reverseбатьків, тож взагалі нічого дитині не потрібно додавати?
— Макс Вотерман
1
Це, мабуть, має бути прийнятою відповіддю - ні хакі, ні абсолютне позиціонування, переповнення працює чисто при потребі (це було для мене).
— Доцільно
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!

— Хешброн
джерело
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 +)

перевірте, що працює Fiddle

Оскільки нормальний потік "зверху донизу", ми не можемо просто попросити #copyrightдіва приклеїтись до низу його батька без абсолютно якогось позиціонування, але якби ми хотіли, щоб #copyrightдів тримався на вершині його батьків, це буде дуже просто - адже це нормальний спосіб протікання.

Тож ми використаємо це на нашу користь. ми змінимо порядок divs в HTML, тепер #copyrightdiv знаходиться вгорі, і вміст слідкуйте за ним відразу. ми також робимо вміст діва розтягнутий на весь шлях (використовуючи псевдоелементи та методи очищення)

тепер справа лише в тому, щоб повернути цей порядок назад у поле зору. це легко зробити за допомогою перетворення 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.

— Skippy le Grand Gourou
джерело
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>
Розгорніть фрагмент

— азізарслан
джерело
3

Якщо ви хочете, щоб він "прилипав" до дна, незалежно від висоти контейнера, то абсолютне позиціонування - це шлях. Звичайно, якщо елемент авторського права є останнім у контейнері, він завжди буде внизу.

Чи можете ви розширити своє запитання? Поясніть, що саме ви намагаєтеся зробити (і чому ви не хочете використовувати абсолютне позиціонування)?

— Джек Слейт
джерело
2

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

— Привид Ехо
джерело
1

Можливо, це комусь допомагає: Ви завжди можете розмістити діва поза іншим дівом, а потім підсунути його вгору, використовуючи негативний запас:

<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

Не хочеться використовувати "позицію: абсолютну" для липкого нижнього колонтитулу внизу. Тоді ви можете зробити так:

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

— злоктб
джерело
0

Просто тому, що про це взагалі не згадувалося, що зазвичай добре працює у таких ситуаціях, як ваша:

Розміщення авторських прав-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>

Єдиний раз, коли це може бути не ідеально, це коли ваш контейнер-дів оголошено height:100%, і користувачеві потрібно буде прокрутити вниз, щоб переглянути авторські права. Але навіть все одно ви можете обійтись (наприклад, margin-top:-20pxколи висота вашого авторського елемента становить 20 пікселів).

  • Немає абсолютного позиціонування
  • Немає макета таблиці
  • Немає шаленого css, який виглядає по-різному в будь-якому іншому браузері (ну IE принаймні, ви знаєте)
  • Просте і чітке форматування

Убік: я знаю, що ОП просила рішення, яке "... прилипає до низу" контейнера "діви ..." , а не щось під ним, але давай, люди шукають хороших рішень тут, і це є один!

— Левіт
джерело
У випадку з ОП це рішення добре лише в тому випадку, якщо #copyright має фіксовану висоту (тоді ви можете встановити margin-top: -{element height} .
— Gajus
@Gajus: Це не абсолютне і не фіксоване позиціонування. Це робить саме те, що хоче ОП (незалежно від висоти авторських прав), за винятком лише того, що автор-div не є в першому контейнері. ОП просила авторські права наклеїтись на дно контейнера, а не на сторінку !!
— Левіт
Вибачте, я не маю на увазі, якщо висота контейнера для # контейнера встановлена.
— Гаджус
Якщо я не помиляюся, справжньою проблемою, яку OP намагається вирішити, є нижня частина елемента, коли висота елемента диктується іншим елементом, наприклад, з коментарями jsbin.com/acoVevI/3 . Тут ви не можете просто поставити кнопку поза контейнером . Щоб проілюструвати проблему, див. Jsbin.com/acoVevI/4 .
— Гаджус
В ОП сказали: "Я хотів би, щоб # авторські права трималися внизу #container.", Тому це не зовсім зрозуміло з питання. Більше того, це вагомий приклад для будь-якого випадку, коли він просто повинен "прилипати до нижньої частини #container". Це рішення повинно бути корисним, має чіткий підхід і добре працює для багатьох макетів. Наприклад, будь-яку сторінку з прокручуваним вмістом, наприклад, stackoverflow.com ;-)
— Левіт
0

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

Мені потрібно було зробити навігаційну панель, яка б містила фактичні посилання внизу праворуч та випадкові елементи братів, забезпечуючи, щоб ця планка сама розтягнулася належним чином, не порушуючи компонування. Я використовував елемент "тінь", щоб зайняти простір посилань навігаційної панелі, і додав його в кінці дочірніх вузлів контейнера.

<!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-cellта vertical-alignпідхід, який надійно працював для розміщення одного діва в нижній частині його батьківського.

Зауважте, що використання 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 стилю, 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.