Как получить заголовок из области прокрутки?

У меня есть заголовок и длинный прокручиваемый контент. Я бы хотел, чтобы заголовок не был прокручиваемым. Я попытался установить overflow: hidden в заголовок, но безуспешно.

Как я могу получить заголовок из области прокрутки?

Отрывок:

<body>
  <div style="overflow: hidden">Header</div>
  <div style="overflow: scroll">Content - very long Content...

Смотрите Plunker с этим кодом.

Я также пробовал устанавливать стили в теле - без успеха.

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

Ответы

Ответ 1

Сначала удалите свои встроенные стили. Затем добавьте этот css.

html , body {
  margin: 0px;
  height: 100%;

}

.content {
  height: 100%;
  overflow: scroll;
}

https://jsfiddle.net/sthsuuec/11/

Ответ 2

Нашел магию гибкости.

Здесь пример того, как делать фиксированный заголовок и прокручиваемый контент. Код:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
    </div>
  </body>
</html>

Для полной реализации Holy Grail (заголовок, нижний колонтитул, nav, side и content), используя гибкий дисплей, перейдите к здесь.