Высота окна просмотра (vh) не работает с положением - PullRequest
Новая
       0

Высота окна просмотра (vh) не работает с положением

1 голос
/ 05 января 2020

Я построил макет галереи. Каждый раздел <div class="gallery"> заполняет область просмотра. Вот как это выглядит без липкого заголовка. Макет работает, как и ожидалось, используя этот метод. 

body {
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

header,
footer {
  padding: 48px;
  color: #fff;
  background-color: #000;
}

.gallery {
  display: flex;
  height: 100vh;
}

.gallery figure {
  flex: 1;
  margin: 0;
}

.gallery figure img {
  display: block;
  /* Make images responsive */
  height: auto;
  max-width: 100%;
  /* Fill .gallery width and height */
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
<header>
  <span>Header</span>
</header>

<div class="gallery">
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
</div>

<div class="gallery">
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
</div>

<footer>
  <span>Footer</span>
</footer>

Затем я добавил липкий заголовок, вот так. 

body {
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

header,
footer {
  padding: 48px;
  color: #fff;
  background-color: #000;
}

header {
  position: sticky;
  top: 0;
}

.gallery {
  display: flex;
  height: calc(100vh - 120px);
}

.gallery figure {
  flex: 1;
  margin: 0;
}

.gallery figure img {
  display: block;
  /* Make images responsive */
  height: auto;
  max-width: 100%;
  /* Fill .gallery width and height */
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
<header>
  <span>Header</span>
</header>

<div class="gallery">
  
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    
</div>

<div class="gallery">
  
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    
</div>

<footer>
  <span>Footer</span>
</footer>

Чтобы учесть липкий заголовок, я добавил height: calc(100vh - 120px); к .gallery. Это работает для первого .gallery родителя, но с последним родителем .gallery происходит нечто странное. Как видите, нижний колонтитул перекрывается.

РЕДАКТИРОВАТЬ

Если вы проверите <figure> на примере липкого заголовка, вы заметите, что он правильно вычисляет высоту , Например, при разрешении 1366x768 высота <figure> составляет 648 пикселей в высоту (768 - 120 пикселей). Однако элементы <a> и <img> имеют высоту 768 пикселей.

Как я могу это исправить?

1 Ответ

1 голос
/ 05 января 2020

Согласно моему редактированию, проблема заключается в том, что элементы <a> и <img> не содержатся в элементе <figure>. Я решил это, добавив height: 100%; к .gallery figure a и .gallery figure img. 

body {
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

img {
  height: auto;
  max-width: 100%;
}

header,
footer {
  padding: 48px;
  color: #fff;
  background-color: #000;
}

.gallery {
  display: flex;
  height: 100vh;
}

.gallery figure {
  flex: 1;
  margin: 0;
}

.gallery figure a,
.gallery figure img {
  display: block;
  height: 100%; /* Fills the height of <figure> */
}

.gallery figure img {
  object-fit: cover;
}
<header>
  <span>Header</span>
</header>

<div class="gallery">
  
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    
</div>

<div class="gallery">
  
  <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
  
    <figure>
    <a href="#" class="lightbox">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
    </a>
  </figure>
    
</div>

<footer>
  <span>Footer</span>
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...