Создание «фиксированного» заголовка переменной высоты в CSS с прокручиваемым содержимым - PullRequest
Новая
       24

Создание «фиксированного» заголовка переменной высоты в CSS с прокручиваемым содержимым

11 голосов
/ 20 июля 2011

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

Это кажется простым, просто добавьте «position: fixed» к стилю, но затем содержимое появится под заголовком, потому что заголовок «удален из потока». Таким образом, решение, которое я думаю, состоит в том, чтобы добавить «margin-top: height» к контенту.

Какой лучший способ решить эту проблему, когда высота заголовка является переменной?

У меня есть скрипка, которая демонстрирует проблему:

http://jsfiddle.net/waterlooalex/j4Z8F/2/

При условии, что окно вашего браузера не слишком большое, текст контента будет прокручиваться под заголовком "Привет, мир", проблема в том, что первая строка текста "Lorem ipsum ..." скрыта. У меня есть комментарий из JavaScript, который работает вокруг проблемы.

Ответы [ 5 ]

10 голосов
/ 20 июля 2011

Вы можете добавить вторую копию заголовка div, которая не исправлена, и использовать что-то вроде visibility:hidden. Таким образом он выталкивает контент в нужное место, но без использования JavaScript. Вроде хак, но я попробовал это на твоей скрипке, и это работает.

3 голосов
/ 19 апреля 2016

Вы можете решить эту проблему, используя flexbox модель макета, как показано в демонстрации ниже.

Обратите внимание, что я добавил display:flex к <body> для демонстрационной цели, в идеале вам следуетпередать его более конкретному родительскому элементу. 

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#header {
  background: dodgerblue;
}
h1 {
  font-size: 2em;
  font-weight: 700;
}
#content {
  flex: auto;
  overflow-y: auto;
}
<div id="header">
  <h1>hello world</h1>
</div>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ante quam, vitae fringilla odio. Nulla molestie, justo non adipiscing varius, mi turpis luctus ligula, sit amet posuere massa elit a tellus. Cras metus risus, sagittis hendrerit sollicitudin
    in, lobortis at elit. Nam posuere molestie enim, sagittis mattis justo vehicula gravida. Fusce placerat porta fermentum. Sed laoreet leo ac tellus consectetur blandit. Sed consequat, ipsum a imperdiet convallis, elit est ultrices elit, et malesuada
    lorem magna eu eros. Sed convallis adipiscing nibh ut volutpat. In consequat egestas elit, eget venenatis lacus condimentum sed. Maecenas semper sapien in lacus feugiat volutpat vestibulum dolor pulvinar. Duis ultricies interdum ante elementum tempor.</p>

  <p>Aliquam nulla tellus, consequat nec suscipit vitae, laoreet non erat. Donec tempor ligula in nisi porttitor nec interdum magna gravida. Aenean eleifend, ipsum eu tincidunt tristique, orci mi molestie libero, at aliquam massa velit ut tortor. Aenean
    nisi velit, feugiat ut posuere eget, porta ac erat. Morbi lobortis ligula nec sem bibendum in imperdiet ipsum tempus. Integer tincidunt mauris quis justo consequat eget pharetra arcu rutrum. Nullam auctor libero luctus eros porta commodo. Aenean auctor
    libero eu arcu porta cursus. Fusce viverra arcu nec elit rutrum et fringilla lectus vulputate. Integer sed leo sit amet ligula aliquam suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla commodo
    varius lectus, non pellentesque dui ornare vel. Duis pretium purus at sapien sollicitudin posuere. Curabitur volutpat posuere diam, at tincidunt leo lacinia quis. Quisque eu arcu enim. Vestibulum condimentum condimentum erat. Sed eros erat, volutpat
    et molestie nec, pharetra vitae diam. Proin tempus, massa vitae malesuada dignissim, ipsum ipsum sagittis neque, ac vehicula neque odio nec urna.</p>

  <p>Praesent sed arcu in nunc egestas sagittis sollicitudin at nunc. Curabitur mattis viverra odio. Donec volutpat mauris nec libero molestie quis venenatis mauris convallis. Mauris porta varius nibh, id tincidunt nunc ullamcorper in. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ultrices vulputate. Nam in lacus metus. Duis tempus fringilla lacus ut tristique. Nunc sed hendrerit nunc. Nunc non tellus a magna accumsan volutpat. Aenean sollicitudin
    orci in sapien interdum rhoncus cursus ligula iaculis. Nunc mauris sapien, euismod non egestas vitae, dapibus at libero.</p>

  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor nisi, pellentesque et vestibulum eu, scelerisque eget est. Vivamus porta erat vitae eros sodales accumsan. Duis ligula dui, scelerisque sollicitudin
    blandit quis, sollicitudin vel ipsum. Sed semper dictum eleifend. Duis diam leo, ultricies at consequat nec, consectetur vel lacus. Proin semper luctus nisl, ut luctus sapien egestas vitae. Maecenas eu est nisi. Aliquam erat volutpat. Sed vulputate
    ligula rutrum nunc fermentum vitae consequat magna congue. Donec accumsan consequat pellentesque. Cras justo enim, venenatis non venenatis eu, faucibus id ligula. Aliquam et lorem purus. Sed fringilla gravida dui vitae viverra. Sed id erat nisl. Nulla
    nibh nisi, luctus sed scelerisque id, congue in risus.</p>

  <p>Phasellus eu purus nibh, sit amet sodales dui. Integer tincidunt magna id sem varius faucibus. Etiam id condimentum velit. Cras cursus diam eget libero tristique malesuada. Pellentesque quis arcu tincidunt dolor adipiscing congue ut a enim. Nulla nec
    lacinia est. Pellentesque nec dui mauris, eu eleifend felis. Aliquam feugiat ultrices mi id hendrerit. Phasellus varius sagittis urna, ut fringilla nisi sollicitudin non. Pellentesque ac ligula dolor, ut volutpat sapien. Curabitur vitae diam quis
    ante laoreet suscipit non vitae tellus. Nam id magna est, eu tincidunt odio.
  </p>
</div>
3 голосов
/ 28 ноября 2011

Этот javascript возьмет переменную высоту фиксированного заголовка и установит верхнее поле содержимого под ним. Просто позвоните onload 

<script type="text/javascript">
    function AdjustHeight() {
        var height = document.getElementById("fixedheader").offsetHeight;
        document.getElementById("content").style.marginTop = height + 'px';
    }    
</script>
0 голосов
/ 11 июня 2015

Чтобы это исправить, я добавил в свой контент «фиктивный» div.Этот div имеет ту же высоту, что и div заголовка, таким образом, толкает содержимое настолько точно, чтобы создать правильное смещение.Это тот же ответ, что и приведенный выше @curtisdf, однако он предлагает сделать копию вашего заголовка, я предлагаю сделать пустой div с такой же высотой.

Поскольку существует много причин, по которым высота может измениться(изменение размера окна, изменение содержимого, ...) В итоге я использовал https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js, чтобы поддерживать высоту из фиктивного элемента div в синхронизации с реальным заголовком: 

        var me = this;
        var summary = me.summary;
        var dummy = me.summaryDummy;
        var resize = function () {
            dummy.style.height = summary.clientHeight + 'px';
        };
        new ResizeSensor(summary, resize);
        resize();

Обратите внимание, что я могу сослатьсяреальный заголовок (me.summary) и фиктивный (me.summaryDummy) из-за реализации aurelia.io ref , но вы получаете ссылку на свои div с помощью JQuery или через идентификатор.

0 голосов
/ 20 июля 2011

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

Если ваш заголовок действительно меняет высоту, то вам придется пойти наБоюсь, JavaScript, чтобы обойти это.Выход из потока означает, что остальная часть страницы будет работать как обычно, и JavaScript должен вмешаться, чтобы помочь.

...