Отзывчивые столбцы высоты оставшегося окна просмотра под навигационной панелью - PullRequest
Новая
       7

Отзывчивые столбцы высоты оставшегося окна просмотра под навигационной панелью

0 голосов
/ 27 марта 2020

У меня есть нефиксированный navbar и две колонки. С макетом рабочего стола проблем нет, но когда я проверяю скорость отклика экрана мобильного устройства, мне нужен столбец A, чтобы заполнить оставшуюся область просмотра, а столбец B до go под столбцом A. Кроме того, мне нужно решение, которое не требует жесткого кодирования, например вычитание высоты панели навигации. Я пытался использовать Flexbox, но у меня не получилось. Вместо этого я получаю, что оба столбца появляются в области просмотра. Я использую Bootstrap для отзывчивости.

Здесь есть цифра , которая показывает мою проблему. Вот код, который я пробовал до сих пор: 

.flex-container {
    display: flex;
    flex-direction: column;
}

#content {
    flex-grow: 1;
}

#row {
    flex-grow: 1; max-width: 100vw;
}

#col1 {
    background-color: dimgrey;color: white;
}

#col2 {
    background-color:darkslategrey;color: white
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Web title</title>
  </head>
  <body>
    <div class="vh-100 flex-container">
      <nav class="navbar navbar-dark bg-dark">
        <div class="container px-0">
          <span class="navbar-brand mb-0 h1">Navbar title</span>
        </div>
      </nav>
      <div id="content" class="container flex-container px-0">
          <div id="row" class="row mx-0">
            <div id="col1" class="col-sm px-0">
              Column 1 content
            </div>
            <div id="col2" class="col-sm px-0">
              Column 2 content
            </div>
          </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 29 марта 2020

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

Поскольку ваш контент установлен на flex: 1, что по умолчанию беря всю оставшуюся высоту, вы можете использовать ее в своих интересах здесь, теперь установите #row и его дочерние высоты на 100% следующим образом 

#row, #row > * {
    height: 100%
}

Это поможет вам установить высоту #row и его дети на все 100%. Так что это даст вам желаемый результат, пока вы в мобильном макете.

Я надеюсь, что это решит ваш запрос.

0 голосов
/ 29 марта 2020

Вам необходимо использовать медиазапрос, чтобы установить высоту 100vh только на самых маленьких экранах ширины ... 

@media (max-width: 576px) {
    .min-100 {
        min-height: 100vh;
    }
}

https://codeply.com/p/1zHDI4rsc8

0 голосов
/ 27 марта 2020

То, что вы ищете, это адаптивный дизайн. Вы можете использовать MediaQueri, чтобы ограничить то, что вы видите в разных размерах. И для этой функциональности, которую вы хотите сделать, если вы используете boostrap, лучшее, что вы можете сделать, это использовать карусель.

Посетите https://getbootstrap.com/docs/4.4/components/carousel/, чтобы увидеть, как работает карусель

...