Margin inside div and responsive height

[den4ik_]

Здравствуйте уважаемые форумчане.

Есть такой пример кода https://jsfiddle.net/wodgtsdd/

Вопрос 1: Как сделать чтобы div class="content-wrapper" растягивался по высоте документа (т.е. доставал до нижнего края документа)? Сейчас он растягивается по высоте содержимого в нем контента. Я предполагаю что это можно сделать с помощью js типа получить высоту документа, получить координаты и высоту блока content-wrapper, и вычесть из высоты документа координату левого верхнего угла + высоту блока, а затем сложить полученную величину с высотой блока. Но можно ли это сделать с помощью css? Почему то мне кажется что с помощью css было бы правильнее.

Вопрос 2: Почему параграф lorum ipsum который имеет свойства margin-top и margin-bottom 15 px вылезает своими отступами за пределы div блока, и как правильно это исправить, т.е. сделать так чтобы не вылезал? 

Спасибо за внимание
 

Edited February 27, 2017 by den4ik_

[palindrom]

Доброго времени.

Давайте начнём со второго вопроса. Для того, чтобы получилось то, о чём вы пишите, в стилевой файл нужно добавить вот эти строки:

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
 
.clearfix:after {
clear: both;
} 

И соответственно в html- файле к вашему div - у приписать класс .clearfix.

Вот так:

.....

<div class="content-post">
        <div class="clearfix">
            <p>lorum ipsum</p>
        </div>

.....

Всё, теперь отступы идут от параграфа к div- у.

По первому вопросу уточните, для чего вам нужно, чтобы "content-wrapper" растягивался по высоте?
Может быть вы хотите сделать прилипающий подвал?

[den4ik_]

проблему с отступами параграфа решил с помощью добавления overflow-y: auto; в блок .content-wrapper.

6 часов назад, palindrom сказал:

Может быть вы хотите сделать прилипающий подвал?

Ну даже не знаю как это называется, мне надо чтобы нижний край content-wrapper прилип к нижнему краю окна чтобы полоски border left и right визуально упирались в нижний край окна браузера.

На одном из форумов было предложено решение 

html, body {
    height: 100%;
}

.content-wrapper
{
...
min-height: 100%;
}

но тогда документ сильно вырастает по высоте и появляются полосы прокрутки.

Edited February 28, 2017 by den4ik_