Есть ли способ разместить контент в нижней части div, используя только один div?

Question

Мой CSS это:

.stage{
    width:960px;
    background-image:url('stage.png');
    background-position:bottom;
    background-repeat:repeat-x;
    min-height:400px;
    float:left;
    text-align:center;
}

Это помещает фоновое изображение нижней части div, и содержимое центрируется. Но я не могу понять, как разместить содержимое в нижней части div.

Ширина фиксирована, высота должна увеличиваться, если содержимое выше, чем div, но если содержимое короче, его следует размещать внизу.

Я видел несколько примеров, по крайней мере, с 3 разными div-ами, чтобы выполнить это, но есть ли способ сделать это только с одним div-ом в css? Я не хочу помещать div в в нижней части другого div, все содержимое внутри div должно быть выровнено по низу.

Хотелось бы, чтобы это было так просто, как text-align:bottom;

Answer 1

Если вы не возражаете, используйте абсолютное / относительное позиционирование

.myContainer {
   position:relative; /* Needed so the inner divs position themselves relative to the container*/
}

.myInnerDiv {
    position:absolute;
    bottom:0px;
    text-align:center; /* To get the text to the center */
}

Тогда ваш HTML может быть

<div class="myContainer">
    <div class="myInnerDiv">Content goes here</div>
</div>

Answer 2

Вы можете сделать это с 1 div следующим образом - ваш контейнерный div должен быть

position: relative;

, а затем стиль абзаца (или внутренний div) с

position: absolute;
bottom: 0px;

Answer 3

Это хакерский вид, но, похоже, он работает в Firefox, IE и Chrome (у меня нет других браузеров для его проверки)

CSS

.myContainer {
 width:960px;
 background: #555 url('stage.png') bottom repeat-x;
 min-height:400px;
 float:left;
 text-align:center;
}

.myContainer img.spacer {
 height: 400px;
 width: 0;
 vertical-align: bottom;
 border: transparent 0px;
 text-align: left;
}

HTML

<div class="myContainer">
 <img alt="" class="spacer" /><br>
 blah blah blah blah blah blah blah blah blah blah blah blah
</div>

Answer 4

Редактировать 2: Вы можете сделать так.

<div style="border: 1px solid yellow; width: 70%; height: 100%; position: relative; overflow:hidden">
    Outer
    <a style="border: 1px solid green; width: 100%; position: relative; float: left; margin-top: 5%;" href="#">      
        Comments are disabled for this post


    </a>
</div>

Вы можете изменить любой тег с помощью <a>

Смотрите демо-версию здесь: http://jsbin.com/ajofu

Answer 5

выравнивание по вертикали: ответ снизу.

Answer 6

Один из способов добиться этого - поместить содержимое в другой div и расположить его абсолютно внутри. stage div.

.stage{position:relative;}

.stage .content{
 position:absolute;
 bottom:0;
 text-align:center;
}