Выравнивать текст в конец adiv

Question

Я пытаюсь выровнять свой текст в нижней части div. Обычно это довольно прямолинейно при использовании фиксированных размеров для моих div. Я пытаюсь сделать что-то новое с процентами, а вертикальное выравнивание не работает вообще.

$(document).ready(function(e) { 
    var mh = parseInt($('#map').height()); 
    var h = 70 - ((20/mh)* 100); 
    document.getElementById('map').style.height = h + "%"; 
}); 

#map{ 
    width:95%; 
    height:70%; 
    background-color:#F00; 
} 
<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:30%;"> 
<h1>There is currently <?php echo $a; ?> users playing worldwide at the moment.</h1> 
</div> 
<div id="map"></div> 

Я знаю, что это может быть сделано с фиксированными размерами, я делал я до этого и видел, как это делается в несколько раз. Heres 1 example. Не знаю, почему это не работает, так это случай, когда я должен использовать фиксированные размеры для div или есть другой способ?

UPDATE- этот метод работает для фиксированных размеров, например 100px;

Answer 1

пытаются использовать этот CSS блок

min-height:10em; 
vertical-align:middle; 
height:15%; 
width:25%; 
float:left; 
margin:10px; 
text-align:center; 
padding-bottom:3.5cm; 
margin-top:auto; 
margin-bottom:auto; 

Answer 2

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

HTML

<div class="outerDiv"> 
    <h1>Text to be aligned</h1> 
</div> 

CSS

.outerDiv { 
    position: relative; 
    (Other styles here) 
} 

.outerDiv h1 { 
    position: absolute; 
    bottom: 0; 
    text-align: center; (if needed centralising) 
} 

Это гарантирует, что текст всегда будет находиться в нижней части div независимо от высоты divs.

Answer 3

Я хотел бы поделиться предложением, которое я придумал сам, что не требовало изменения CSS. Я изменил JavaScript, чтобы определить, насколько велика сделать div в процентах и ​​масштабировать div, чтобы он соответствовал остальной части страницы. Используя фиксированный размер с div, все, что осталось сделать, это отрегулировать нижний div, чтобы его масштабируется, чтобы соответствовать.

<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:125px;"> 


var mh = parseInt($('#map').height()); 
    var a = ((20/mh)* 100); 
    var b = ((125/mh) * 100); 
    var c = ((45/mh) * 100); 
    var d = 100 - a - b + c; //add page padding back on 
    document.getElementById('map').style.height = d + "%"; 

Я использую это в функции готовности документа, как в вопросе.