Высота контейнера w.r.t детей

Question

Мы используем CSS3 и HTML5. Я пытаюсь написать страницу, где будет div, чтобы показать некоторый градиент, затем появляется заголовок, а заголовок сопровождается контейнером.

Это то, что я написал и прекрасно работает, пока не представит некоторые фиктивные строки. Click here, чтобы увидеть образец и это фрагмент кода

CSS,

html { 
    height: 100%; 
} 
body { 
    margin: 0px; 
    height: 100%; 
} 
.container { 
    height: 100%; 
} 
.oss-gradient { 
    height: 5px; 
    min-width: 1024px; 
    background: yellow; 
} 
.header { 
    height: 40px; 
    min-width: 1024px; 
    background: #def; 
} 
.content-wrapper { 
    width: 1024px; 
    height: calc(100% - 45px); 
    background: #defabc; 
    margin: 0px auto; 
} 

Мой HTML,

<div class="container"> 
    <div class="oss-gradient"> 
    </div> 
    <div class="header"> 
    </div> 
    <div class="content-wrapper"> 
     <!-- some dummy lines here //--> 
    </div> 
</div> 

Тогда я изменил свойство высоты Content-обертки до минимальной высоты. И тогда это сработало хорошо. Он отлично работал, когда я пытаюсь изменить уровни масштабирования и размер окна моего браузера. Затем я открыл firebug и зависал на элементах div, body и html contianer. Я заметил, что элемент content-wrapper вышел из контейнера div. Другими словами, контейнер, тело и html не расширялись с помощью элемента content-wrapper.

Затем я добавил свойство min-height для контейнера div, думая, что оно будет расширяться по содержимому-оболочке. Затем я увеличил масштаб страницы и обнаружил, что оболочка содержимого не расширяет доступную высоту.

Затем я удалил свойство высоты на html, body и min-height на контейнере. Теперь все три элемента расширяются по отношению к ребенку. Но когда я удаляю все фиктивные строки, я не могу видеть div-оболочку content-wrapper.

Как это исправить?

Answer 1

Вы должны использовать min-height для body элемента и использовать background на вашем html элемент

Demo (Покрытие всей страницы)

Demo 2 (с большим содержанием)

body { 
    margin: 0px; 
    min-height: 100%; 
} 

Вы можете обратиться мой вопрос here для подобный выпуск.