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

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

position: absolute; 
bottom: 0;

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

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

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

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

Я достиг этого в 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

}

труба должна прийти 1-й, затем вырез, затем текст в порядке HTML.

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

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

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

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

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

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

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

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

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

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

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

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

Я пробовал этот сценарий, размещенной ранее;

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

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/

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

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

и никаких таблиц...!

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

align-self: flex-end;

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

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

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

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

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

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

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

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

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

Я знаю, что это очень старый поток, но все же я хотел бы ответить. Если кто-нибудь следовать ниже 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>

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

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

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

.invisible {
float: left;  
}

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

simple......in 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 и иметь" боковую панель", плавающую слева. затем" содержимое "плавает вправо, а затем" нижний колонтитул " очищает оба.

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

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

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

альтернативным ответом является разумное использование таблиц и 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>

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

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

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

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