Блог

Используя flexbox , я пытаюсь создать шаблон «верхний-содержимое-нижний колонтитул» с изображением внутри раздела содержимого. Шаблон работает, как и ожидалось, пока я не помещу изображение в раздел среднего содержимого. После добавления изображения раздел содержимого расширяется, выталкивая нижний колонтитул из области просмотра, несмотря на то, что изображение имеет набор max-height свойств, который делает его достаточно маленьким, чтобы не переполнять его родительский контейнер, и остается пустое пространство. Более того, размер отображаемого изображения, похоже, вообще не влияет на объем пространства, на которое отводится нижний колонтитул. Нижний колонтитул смещается на одно и то же расстояние (примерно на высоту нижнего колонтитула / заголовка несколько пикселей), независимо от того, установлено ли для изображения max-height значение 10%, 50% или 80% (но это влияет на отображаемый размер изображения!). Если я заменяю изображение обычным текстом div , оно также работает так, как задумано, просто изображение делает толчок.

В чем может быть причина и как ее устранить?

HTML:

   <div class="root">
        <h2>HEADER</h2>
        <div class="contents-container">
            <img src="someImage.png" alt="" class="tutorial__image"/> // if this is removed pattern works fine
        </div>
        <h2>FOOTER</h2>
  </div>
 

CSS (синтаксис SCSS):

  .root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    h2 {
      height: 4rem;
      margin: 0;
    }
  }
  .contents-container {
    width: 100%;
    height: 100%;
    flex-grow: 1;
  }
  .tutorial__image {
    max-height: 50%; // this is low enough to leave empty space in the container. However lower/higher setting doesn't change the footer offset
    max-width: 100%;
  }
 

Это часть Vue приложения, и я им пользуюсь scss , но я сомневаюсь, что это имеет значение. Я был бы признателен за любую помощь.

Мы можем избежать этой проблемы, добавив изображение с помощью css / scss. Попробуй это

HTML

 <div class="contents-container backg-img">
    //your content
</div>
 

scss

 .backg-img {
  background-image: url("image.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
}