Ошибка строки в строке CSS

Question

У меня есть угловая директива, которая создает 3-строчный макет с фиксированным верхним и нижним колонтитулом, где содержимое должно быть текучим на основе содержимого посередине.

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

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

/* HTML */

<ng:editor data-control="smartobject"> 
    <div data-type="header"> 
     HEADER 
    </div> 
    <div data-type="body"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante non volutpat finibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur mollis porta ullamcorper. Nunc enim eros, porttitor in lorem id, dictum iaculis orci. Pellentesque sollicitudin euismod sapien vitae pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam velit purus, scelerisque eget faucibus a, scelerisque sed neque. Proin auctor id eros a venenatis. Nam sed ex sit amet nibh convallis auctor. Vivamus nunc massa, lobortis sit amet fringilla ac, efficitur sed dui. Sed sit amet est ut lacus iaculis vulputate a at libero. Sed vel justo at erat bibendum egestas. Curabitur ac tempus nunc.</p> 
    </div> 
    <div data-type="footer"> 
     FOOTER 
    </div> 
</ng:editor> 

/* CSS */

ng\:editor { 
    border: solid 1px rgb(239, 239, 239); 
    display: block; 
    height: 100%; 
    min-height: 315px; 
    position: relative; 
    width: 300px; 
} 
ng\:editor [data-type=header], 
ng\:editor [data-type=footer] { 
    height: 40px; 
    left: 0; 
    position: absolute; 
} 
ng\:editor [data-type=header] { 
    border-bottom: solid 1px rgb(239, 239, 239); 
    top: 0; 
    width: 100%; 
} 
ng\:editor [data-type=footer] { 
    border-top: solid 1px rgb(239, 239, 239); 
    bottom: 0; 
    width: 100%; 
} 
ng\:editor [data-type=body] { 
    bottom: 40px; 
    height: auto; 
    left: 0; 
    position: absolute; 
    top: 40px; 
    width: 100%; 
} 

Это архитектурное требование использовать угловую ng:directive обозначения для вызова директивы, таким образом, укладка непосредственно на нем, как это, так что не судите.

Все, что я делаю, пытается получить содержимое, чтобы растянуть высоту тега <p></p>.

Как просто jsFiddle, чтобы показать, что я сделал: FIDDLE

Answer 1

Чтобы растянуть высоту p тега попробуйте следующее:

ng\:editor [data-type=body] { 
    padding-top: 40px; 
    height: auto; 
    padding-bottom: 40px; 
    width: 100%; 
} 

я удалил position:absolute и дал padding тот же размер как верхний и нижний колонтитулы.