CSS Работает со 100%

Question

Рассмотрите this jsfiddle example.

Мне нужен content, чтобы всегда растягиваться, чтобы соответствовать нижней части его родительского контейнера (который может быть любой высоты). По сути, я хочу, чтобы выглядеть следующим образом:

Answer 1

Поможет ли это ?: http://jsfiddle.net/Boroso/8rXnL/ Изменить: К сожалению, оригинальная ссылка ошибалась.

Изменение высоты контейнера до авто позволит для изменение высоты в содержании. Это то, что я предполагаю, что вы спрашиваете .

#box { 
    width:300px; 
    height:auto;  
    border:1px solid; 
} 

div.content { 
    width: auto; 
    height: 300px; 
    background:#333; 
    margin: 10px; 
} 

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

Answer 2

Почему бы не просто использовать меньше высоты?

Как это:

height: 85%; 

Answer 3

Я не думаю, что это возможно в чистом CSS, если высота окна и содержание до его изменения по высоте. Я собрал небольшой Javascript, который автоматически регулирует высоту #content в зависимости от высоты #box и высоты и полей абзаца выше.

$(document).ready(function() { 
    var p = $('#box > p:first-child'); 
    var margin_top = p.css('margin-top').substring(0,p.css('margin-top').length-2); 
    var margin_bot = p.css('margin-bottom').substring(0,p.css('margin-bottom').length-2); 
    var box_height = $('#box').css('height').substring(0, $('#box').css('height').length-2); 
    var p_height = p.css('height').substring(0,p.css('height').length-2); 
    var content_height = box_height - p_height - margin_top - margin_bot; 
    $('#content').css('height', content_height+'px'); 
}); 

JSFiddle ссылка: http://jsfiddle.net/ueeMW/