Убедитесь, что секция находится над сгибом в CSS

Question

У меня есть веб-сайт с простым изображением типа героя (или баннером), заголовком навигации и контейнером ввода-поиска, который может иметь переменный размер в зависимости от некоторых настроек.

====
|||||||||
|||||||||
;;;;;;;;;

это переводит
-навигаторский заголовок
-баннер изображения
-поиск контейнера

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

Меню навигации всегда составляет 10% от высоты области просмотра экрана

Контейнер поиска рассчитывается на сервере и достигает переменных высот. Например, контейнер поиска может иметь 2 текстовых поля поиска.один поверх другого или просто 1.

Изображение баннера - это единственное изображение, которое я хочу заполнить оставшимся пространством после того, как searchcontainer и навигационное меню приобрели достаточную долю размера.

<div style="height:100vh;display: flex; flex-direction: column">
<div style="background-color:red;height:150px">navigation menu (always 150px)u</div>

<div style="background-color:antiquewhite;height: 200px;"> hero image image ( this must take over the space left over in the viewport ) after the nav menu and bottom space took their share</div>

<div style="background-color:aqua;min-height: 405px;"> variable height container can be 400px or 600px depending on what it contains</div>

http://cssdeck.com/labs/gemoy4ga

Answer 1

Во-первых, использование встроенных стилей с атрибутом style= делает ваш код чрезвычайно сложным в управлении.Я рекомендую использовать классы и фактическую таблицу стилей.Я сделал это в моем примере кода ниже.

Вы управляете тем, какие элементы растут и сжимаются с размером flex-box, используя свойства flex-grow и flex-shrink:

https://developer.mozilla.org/en/docs/Web/CSS/flex-grow https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink

Вот моя реализация:

.wrapper{
  display:flex;
  flex-direction:column;
  height:100vh;
}
.wrapper .nav{
  flex-shrink:0;
  flex-grow:0;
  height:10%;
  
  background-color:red;
}
.wrapper .hero{
  flex-grow:1;
  
  background-color:antiquewhite;
}
.wrapper .search{
  height:400px;

  background-color:aqua;
}

<div class="wrapper">
    <div class="nav">navigation menu (always 150px)u</div>

    <div class="hero">hero image ( this must take over the occupied space</div>

    <div class="search">variable height container can be 400px or 600px depending on what it contains</div>
</div>

Обратите внимание, что вы сказали, что nav должен быть как "всегда 150px", так и "10% от высоты области просмотра".Я не был уверен, что вы на самом деле хотели, поэтому пошел с последним.

Answer 2

Ниже приведены два подхода к решению вашей проблемы, добавив значение flex в контейнер изображения hero.

Поскольку внешний div имеет flex-direction: column, вы можете использовать flex присваивает детям право определять, будут ли они уменьшаться, расти, оставаться такими же и устанавливать гибкую основу.Смотрите здесь для хорошего разбега: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

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

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

Сначала добавимизображение героя в качестве адаптивного изображения:

Это позволит сохранить высоту изображения даже на экранах меньшего размера (как бы высота изображения не была равна ширине этого изображения).

Однакона больших экранах необходимо убедиться, что вы используете изображение с достаточной высотой, чтобы заполнить .hero div.

См. фрагмент кода ниже и обязательно нажмите на «Полная страница», чтобы увидеть дополнительнуюпробел

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 1 0;
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      <img src="https://via.placeholder.com/1280x200/?text=Hero+Image" class='img-responsive'>
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

Во-вторых, установка фонового изображения на hero div

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

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 1 0;
    background-image: url(https://via.placeholder.com/1280x200/?text=Hero+Image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

Решение для любого случая должно включать media queries, чтобы учесть изменения высоты блока героя в зависимости от размера экрана.Для подхода background-image вы можете добавить height к hero div для соответствия желаемому результату.

Один из возможных подходов

Добавить flex-basis герою-образу.Я выбрал 200px и установил значение flex-shrink на 0.На больших экранах я просто хочу убедиться, что мое изображение достаточно большое, чтобы не выглядеть растянутым, как здесь.

.container {
    height:100vh;
    display: flex; 
    flex-direction: column
}

.nav {
    background-color:red;
    flex: 0 0 150px;
    height: 10%;
}

.hero {
    flex: 1 0 200px;
    background-image: url(https://via.placeholder.com/1280x200/?text=Hero+Image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    
}

.img-responsive {
    display: block;
    max-width: 100%;
    width:100%;
}

.variable {
    flex: 0 0 auto;
    background-color:aqua;
    min-height: 405px;
    max-height: 600px;
}

<div class='container'>
  <div class="nav">
      navigation menu (always 150px)u
  </div>

  <div class='hero'>
      <!-- Background Image Approach -->
  </div>

  <div class='variable'> 
      variable height container can be 400px or 600px depending on what it contains
  </div>
</div>

Answer 3

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 150px; /* don't grow, don't shrink, fixed at 150px height */
  background-color: red;
}

main {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  background-color: antiquewhite;
}

footer {
  flex: 1 0 400px;   /* min-height: 400px and can expand */
  max-height: 600px;
  background-color: aqua;
}

<body>
  <header>navigation menu (always 150px)</header>
  <main>hero image (this must take over the occupied space)</main>
  <footer>variable height container can be 400px or 600px depending on what it containers</footer>
</body>