Как мне получить div, чтобы плавать в нижней части контейнера?

Ответ 1

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

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

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

Ответ 2

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

position: absolute; 
bottom: 0;

... и там вы идете:)

Ответ 3

Способ заставить его работать:

• Поплавьте ваши элементы, как обычно.

• Поверните родительский 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 градусов, чтобы снова поместить их прямо. Вуаля! они плавают на дно.

Ответ 4

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

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

$("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.

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

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

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

Ответ 9

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

.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>

Ответ 10

С введением 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>

Ответ 11

Если вы установите родительский элемент как position: relative, вы можете установить дочерний элемент в нижнюю позицию настройки: 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>
  

Ответ 12

Не уверен, но ранее опубликованный сценарий работал, если вы используете position: relative вместо абсолютного на дочернем 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>

И нет таблиц...!

Ответ 13

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

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

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

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

Ответ 14

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

<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/

Ответ 15

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

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

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

Ответ 16

A выбрал такой подход @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/

Ответ 17

Теперь это возможно с помощью гибкой коробки. Просто установите "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>

Ответ 18

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

align-self: flex-end;

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

Ответ 19

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

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

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

Ответ 20

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

Ответ 21

Один интересный подход состоит в том, чтобы складывать пару правых элементов float друг над другом.

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

Проблема только в том, что это работает только тогда, когда вы знаете высоту окна.

Ответ 22

Ответ на Stu наиболее близок к работе до сих пор, но он по-прежнему не учитывает тот факт, что ваша внешняя высота 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; }
}

Ответ 23

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

<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>

Ответ 24

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

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

.invisible {
float: left;  
}

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

Ответ 25

simple...... в файле html right.... есть нижний колонтитул (или 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 файлу и повернуть "боковую панель" влево. затем добавьте "content" float вправо, затем снимите "нижний колонтитул".

который должен работать .did для меня.

Ответ 26

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

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

Ответ 27

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

Ответ 28

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

<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>

Ответ 29

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

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