Родительский div с фиксированной позицией img не имеет высоты / Невозможно применить скрытое переполнение, если высота › чем размер области просмотра

Я пытаюсь выполнить последнюю часть моего общего шаблона для статей в блоге WordPress.

У меня есть заголовок/меню, которое position: fixed.

Затем у меня есть div .postThumbnail с дочерним img, который равен position: fixed, поэтому следующий контент может перекрывать img при прокрутке.

У меня также есть div, который копирует img'height, поскольку изображение исправлено.

Дело в том, что это было бы намного проще, если бы .postThumbnail имел высоту, но его значение равно 0.

Я не знаю почему.

Что я намерен сделать, так это установить max-height .postThumbnail равным высоте области просмотра минус высота заголовка/меню, поэтому, если изображение выше области просмотра, оно не будет переполняться. и следующий контент, который можно прокручивать, появится сразу после изображения (а не после общей высоты изображения).

По сути, мне нужно определить высоту .postThumbnail, чтобы я мог применить overflow:hidden.

Любая идея?

Я создал JSFiddle, чтобы вы могли видеть, о чем я говорю.

Некоторые из текущего кода:

#single\.php .postThumbnail img {
  position: fixed;
  z-index: 1;
  width: 100%;
  min-width: 640px;
  height: auto;
}

#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
    visibility: hidden;
}

Чего мне нужно добиться:

#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}

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


css parent-child position height fixed
person Séane    schedule 12.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что ж,

Я действительно все упростил, так как мне не нужен .postThumbnailGhost в этой новой версии.

Я также сделал это в Jquery, так как не мог полностью сделать это в CSS ( :'() ).

Вот скрипт, который выполняет эту работу:

 function refreshDynamicContent(){
  $('.postThumbnail').height($('.wp-post-image').height());
  $('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
  $('#post').css('min-height', $('.postThumbnail').height());
  }
  refreshDynamicContent();
  $(window).on("resize", refreshDynamicContent);

Новый JSFiddle

И мне больше не нужно переполнение, потому что я могу установить height на height окна!

УРА!

person Séane    schedule 12.02.2016