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

Как я могу расположить мой 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 ]

3 голосов
/ 21 августа 2015

Использование свойства translateY и top

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

* 1005 ВЫГОДЫ *

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

Но все еще просто обходной путь: (

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

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

2 голосов
/ 15 мая 2013

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

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

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

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

1 голос
/ 03 апреля 2014

Может быть, это кому-нибудь поможет: вы всегда можете поместить 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 голос
/ 06 января 2014

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

    #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 голосов
/ 16 ноября 2016

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

 #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 голосов
/ 20 мая 2013

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

position:absolute;
bottom:0;
0 голосов
/ 07 июня 2013

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

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
0 голосов
/ 13 июня 2013

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

Размещение Div-объекта после Div-контейнера

Вам нужно будет только отформатировать 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>

Единственный случай, когда это не может быть идеальным, - это когда ваш контейнер-div объявлен с height:100%, и пользователю необходимо прокрутить вниз, чтобы увидеть авторские права. Но даже при этом вы можете обойтись (например, margin-top:-20px - когда высота вашего элемента авторского права составляет 20 пикселей).

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

В сторону: я знаю, что ОП попросил решение, которое "... прилипает к нижней части" контейнера "div ..." , а не что-то под ним, но давай, люди ищите хорошие решения здесь, и это одно!

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...