Как мне заставить div плавать до дна своего контейнера?

Установите родительский div на position: relative, затем внутренний div на ...

position: absolute; 
bottom: 0;

... и вот так :)

Поместите div в другой div и установите стиль родительского div на position:relative; Затем для дочернего div установите следующие свойства CSS: position:absolute; bottom:0;

После нескольких дней борьбы с различными техниками я должен сказать, что это оказалось невозможным. Даже с использованием javascript (чего я не хочу) это кажется невозможным.

Чтобы прояснить для тех, кто, возможно, не понял - это то, что я ищу: в публикации довольно часто размещают врезку (рисунок, таблицу, рисунок и т. д.) Так, чтобы ее нижняя часть строка текста блока (или страницы) с текстом, естественным образом обтекающим вставку сверху, справа или слева, в зависимости от того, на какой стороне страницы находится вставка. В html / css тривиально использовать стиль float для выравнивания верхней части вставки с верхней частью блока, но, к моему удивлению, кажется невозможным выровнять нижнюю часть текста и вставку, несмотря на то, что это обычная задача макета .

Думаю, мне придется пересмотреть цели дизайна для этого элемента, если у кого-то не появится предложение в последнюю минуту.

Если вас устраивает только самая нижняя строка текста, идущая сбоку от блока (а не полностью вокруг и под ним, чего вы не можете сделать, не закончив блок и не начав новый), это не невозможно переместить блок в один из нижних углов родительского блока. Если вы помещаете какое-то содержимое в тег абзаца внутри блока и хотите разместить ссылку в правом нижнем углу блока, поместите ссылку в блок абзаца и установите для нее значение float: right, а затем вставьте тег div с clear : оба устанавливаются сразу под концом тега абзаца. Последний div должен убедиться, что родительский тег окружает плавающие теги.

<div class = "article" style = "display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href = "#" style = "display: block;float: right;">Read More</a>
        </p>
    <div style = "clear: both;"></div>
</div>

Довольно старый вопрос, но все же ... Вы можете разместить div внизу страницы следующим образом:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Вы можете увидеть, где происходит волшебство. Я думаю, вы могли бы сделать то же самое, переместив его в нижнюю часть родительского div.

Если вам нужно относительное выравнивание, а DIV по-прежнему не дает вам того, что вы хотите, просто используйте таблицы и установите valign = "bottom" в ячейке, содержимое которой вы хотите выровнять по нижнему краю. Я знаю, что это не лучший ответ на ваш вопрос, поскольку DIV должны заменять таблицы, но это то, что мне пришлось сделать недавно с подписью к изображению, и до сих пор это работало безупречно.

Не уверен, но сценарий, опубликованный ранее, похоже, работает, если вы используете позиция: относительная вместо absolute в дочернем div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id = "parent">
    This has some text in it.

    <div id = "child">
        This is just some text to show at the bottom of the page
    </div>
</div>

И никаких столов ...!

Я заставил это работать с первой попытки, добавив position:absolute; bottom:0; к идентификатору div внутри CSS. Я не добавил родительский стиль position:relative;.

Он отлично работает как в Firefox, так и в IE 8, еще не пробовал в IE 7.

Я также пробовал этот сценарий, опубликованный ранее;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Абсолютное позиционирование фиксирует div в нижней части браузера при загрузке страницы, но при прокрутке вниз, если страница длиннее, она не прокручивается вместе с вами. Я изменил позиционирование на относительное, и оно отлично работает. При загрузке div идет прямо вниз, поэтому вы не увидите его, пока не доберетесь до конца.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Это помещает фиксированный div внизу страницы и фиксируется внизу при прокрутке вниз.

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

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

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

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

для достижения аналогичного эффекта вы можете сделать это: не делайте div плавающим, а установите для его свойства display значение inline-block. затем вы можете выровнять его по вертикали, как вам нравится. вам просто нужно установить свойство родительского div vertical-align на top, bottom, middle или baseline

я надеюсь, что это кому-то поможет

альтернативный ответ - разумное использование таблиц и rowspan. установив значение rowspan = "2" для всех ячеек таблицы в предыдущей строке (кроме ячейки с основным содержимым), вы всегда получите отверстие на одну ячейку внизу основной ячейки таблицы, которое вы всегда можете поместить valign = "bottom".

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

Я перепробовал все ответы на div, но не смог заставить их делать то, что мне нужно.

<table>
<tr>
   <td valign = "top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan = "2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign = "bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

Один интересный подход - наложить пару правых плавающих элементов друг на друга.

<div>
<div style = "float:right;height:200px;"></div>
<div style = "float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Единственная проблема в том, что это работает, только если вы знаете высоту коробки.

вот мое решение:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class = "sidebar-left"> <p>content...</p></div>
<div class = "content-right"> <p>content content content content...</p></div>

<div class = "footer">
    <div class = "bottom-element">bottom-element-in-sidebar</div>
</div>

Я добился этого в JQuery, поместив элемент стойки с нулевой шириной над плавающим элементом справа, а затем изменив размер стойки (или трубы) в соответствии с высотой родительского элемента минус высота плавающего дочернего элемента.

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

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

На первом месте должна быть труба, затем вырез, затем текст в порядке HTML.

Чтобы поместить любой элемент в нижнюю часть контейнера, просто используйте это:

div {
    position: absolute;
    bottom: 0px;
}

Ответ Стью ближе всего к работе, но он все еще не учитывает тот факт, что высота вашего внешнего div может измениться в зависимости от того, как текст переносится внутри него. Таким образом, изменить положение внутреннего div (путем изменения высоты «трубы») только один раз будет недостаточно. Это изменение должно происходить внутри цикла, поэтому вы можете постоянно проверять, достигли ли вы правильного позиционирования, и при необходимости корректировать.

CSS из предыдущего ответа все еще в силе:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Однако Javascript должен выглядеть примерно так:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Способ заставить его работать следующий:

• Разместите элементы влево, как обычно

• Поверните родительский div на 180 градусов, используя

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle: http://jsfiddle.net/wcneY/

• Теперь поверните все плавающие элементы влево (присвойте им класс) на 180 градусов, чтобы снова выровнять их. Вуаля! они плавают на дно.

Я бы просто сделал стол.

<div class = "elastic">
  <div class = "elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

И CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Посмотреть в действии:
http://jsfiddle.net/mLphM/1/

Я попробовал несколько из этих техник, и следующие у меня сработали, поэтому, если все остальное здесь, если все остальное не помогает, попробуйте это, потому что это сработало для меня :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id = "footer" >Sportkin - the registry for sport</div>

А выбрал этот подход @ dave-kok. Но работает только в том случае, если весь контент устраивает без прокрутки. Я ценю, если кто-нибудь поправится

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Вот код http://jsfiddle.net/d9t9joh2/

Я знаю, что это очень старая ветка, но все же я хотел бы ответить. Если кто-то последует приведенному ниже css & html, тогда он работает. Дочерний нижний колонтитул div будет приклеиваться к основанию как клей.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id = "MainDiv">
     <div id = "footerDiv">
     </div>
</div>

Если вы хотите, чтобы текст красиво обернулся: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class = "outer">
  <div class = "inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

просто ...... в html-файле справа .... имейте "нижний колонтитул" (или div, который вы хотите внизу) внизу. Так что не делай этого:

<div id = "container">
    <div id = "Header"></div>
    <div id = "Footer"></div>
    <div id = "Content"></div>
    <div id = "Sidebar"></div>
</div>

СДЕЛАЙТЕ ЭТО: (нижний колонтитул внизу.)

<div id = "container">
    <div id = "Header"></div>
    <div id = "Content"></div>
    <div id = "Sidebar"></div>
    <div id = "Footer"></div>
</div>

После этого вы можете перейти к файлу css и «боковая панель» будет перемещаться слева. затем сделайте так, чтобы «контент» перемещался вправо, затем очистите «нижний колонтитул».

это должно сработать. сделал для меня.

С введением Flexbox это стало довольно просто без особого взлома. align-self: flex-end дочернего элемента выравнивает его по поперечная ось.

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class = "container">
  <div class = "bottom">Bottom of the container</div>
</div>

Выход:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class = "container">
  <div class = "bottom">Bottom of the container</div>
</div>

Теперь это возможно с гибким боксом. Просто установите «display» родительского div как «flex» и установите для свойства «margin-top» значение «auto». Это не искажает никаких свойств обоих div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class = " parent">
  <div class = "child">I am at the bottom!</div>
</div>

Если вы установите родительский элемент как position: relative, вы можете установить дочерний элемент в нижнюю позицию настройки position: absolute; и внизу: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id = "outer">
  <div id = "inner">
    <h1>done</h1>
  </div>
</div>
  

Я тоже давно нашел это решение. Вот что я получаю:

align-self: гибкий конец;

ссылка: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Однако я не могу вспомнить, откуда я открыл эту ссылку. Надеюсь, это поможет

Вы можете попробовать использовать пустой элемент шириной 1 пиксель и перемещать его. Затем очистите элемент, который вы действительно хотите разместить, и используйте высоту пустого элемента, чтобы контролировать, насколько далеко он уйдет.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

Использовать свойство css margin-top с целью установить нижний колонтитул в нижнюю часть его контейнера. И использовать свойство css text-align-last для установки содержимого нижнего колонтитула по центру.

 <div class = "container" style = "margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Ах, молодежь .... Вот вы:

<div class = "block">
    <a href = "#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class = "r-b">A right-bottom-block with some information</span>
    </span>
    <span class = "clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Абсолютной позиции нет! Отзывчивый! Старая школа

Комбинация плавающего и абсолютного позиционирования делает всю работу за меня. Я пытался разместить время отправки сообщения в правом нижнем углу всплывающей подсказки. Время никогда не должно перекрывать тело сообщения, и оно не приведет к раздуванию пузыря, если это действительно не необходимо.

Решение работает так:

1. есть два промежутка с одинаковым текстом;
2. один плавающий, но невидимый;
3. другой абсолютно расположен в углу;

Назначение невидимого плавающего - обеспечить пространство для видимого.

.speech-bubble {
  font-size: 16px;
  max-width: 240px;
  margin: 10px;
  display: inline-block;
  background-color: #ccc;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.inline-time {
  float: right;
  padding-left: 10px;
  color: red;
}

.giant-text {
  font-size: 36px;
}

.tremendous-giant-text {
  font-size: 72px;
}

.absolute-time {
  position: absolute;
  color: green;
  right: 5px;
  bottom: 5px;
}

.hidden {
  visibility: hidden;
}

<ul>
  <li>
    <span class='speech-bubble'>
      This text is supposed to wrap the time &lt;span&gt; which always seats at the corner of this bubble.
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
      <span class='inline-time'>13:55</span>
    </span>
  </li>

  <li>
    <span class='speech-bubble'>
      Easy, uh?
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Well, not <span class='giant-text'>THAT</span>
      easy
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The problem is, we can't tell the span to float to right AND bottom...
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Make the floated span invisible.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The giant text here is to simulate images which are common in a typical chat app.
      <span class='tremendous-giant-text'>Done!</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
</ul>

Хотя это очень сложно, но возможно. Я проверял этот код в последних версиях браузера Firefox и Google Chrome. Старый браузер может не поддерживать свойство css shape-outside. Для получения дополнительной информации проверьте эту ссылку.

window.addEventListener('load', function() {
  var imageHolder = document.querySelector('.image-holder');

  var containerHeight = document.querySelector('.container').offsetHeight;

  var imageHolderHeight = imageHolder.offsetHeight;

  var countPadding = containerHeight - imageHolderHeight;
  imageHolder.style.paddingTop = countPadding + 'px';
  containerHeight = document.querySelector('.container').offsetHeight;
  var x1 = '0' + 'px ' + countPadding + 'px';

  var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px';

  var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px';

  var x4 = 0 + 'px' + ' ' + containerHeight + 'px';

  var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')';

  imageHolder.style.shapeOutside = value;

});

.container {
  width: 300px;
  text-align: justify;
  border: 1px solid black;
}

.image-holder {
  float: right;
}

<div class='container' style = "">
  <div class='image-holder' style=''>
    <img class='bottom-right' style = "width: 100px;" src = "https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt = "">
  </div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</div>

</div>

С помощью некоторого JavaScript мне удалось прикрепить плавающий элемент к нижней части его контейнера - и при этом он все еще был плавающим в тексте, что очень полезно для таких вещей, как shape-outside.

Плавающему элементу назначается margin-top, равный его контейнеру, за вычетом его собственной высоты. Это сохраняет плавающий объект, подталкивает элемент к нижнему краю его контейнера и предотвращает перетекание текста под элемент.

const resizeObserver = new ResizeObserver(entries => {
  if (entries.length == 0) return;
  const entry = entries[0];
  if (!entry.contentRect) return;

  const containerHeight = entry.contentRect.height;
  const imgHeight = imgElem.height;
  const imgOffset = containerHeight - imgHeight;
  
  imgElem.style.marginTop = imgOffset + 'px';
});

const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);

Рабочий пример: https://codepen.io/strarsis/pen/QWGXGVy

Благодаря ResizeObserver и широкой поддержке JavaScript это кажется очень надежным решением.