Как сделать макет с шапкой нефиксированной высоты?

Question

[amadel]

Пытаюсь создать макет страницы из двух элементов:



Основная сложность: при прокрутке содержимого, шапка должна быть всегда видна вверху страницы.

Нашел пример, где указывается position: fixed для шапки, но тогда непонятно, какую позицию указать для содержимого?

Answer 1

[Александр]

Полагаю, тут без JS не обойтись.

<style type="text/css">
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(120, 140, 200, 0.8);
    padding: 1em 3em;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('body').css('margin-top', $('.fixed-top').outerHeight()) ;
});
</script>

<div class="fixed-top"></div>

https://fiddle.jshell.net/uLL6s95f/

Comments

[amadel]

Пробовал на JS, что-то типа $('content').style.height = "" + (document.body.scrollHeight - $('header').offsetHeight) + "px"; но высота div'a content не всегда вписывается в высоту страницы. У вас есть какие-нибудь советы по этому поводу?

[Александр]

amadel: см. выше. :)

[amadel]

То, что надо, спасибо!

Answer 2

[Артем]

jsfiddle.net/uuLnbm7d
Так подойдет?

Comments

[amadel]

При такой разметке не всё содержимое видно: jsfiddle.net/uuLnbm7d/1