Блог

Главная - Вопросы по программированию - Гибкий div всегда занимает оставшуюся высоту

Гибкий div всегда занимает оставшуюся высоту

#html #css #flexbox

#HTML #css #гибкий ящик

Вопрос:

Я создаю веб-страницу, но мне трудно сделать ее отзывчивой и соответствующей моим желаниям.

Я создаю страницу входа в систему с окном предупреждения, предупреждение появится только в том случае, если пользователь введет неправильный пароль или адрес электронной почты.

Я хочу, чтобы основное div содержимое (flex-3) было центрировано на странице, и когда появляется предупреждение (flex-2) о том, что на странице нет колеса прокрутки, поэтому flex-3 вроде как должен вычислять оставшуюся высоту страницы и центрироваться, иочевидно, что все это должно работать независимо от разрешения устройства.

Я пытался сделать это с помощью flex div , но самое близкое, что я получил, было сделано так, чтобы предупреждение увеличивало общую высоту страницы, поэтому внизу было колесо прокрутки без содержимого.

 html,
body {
    color: #fff;
    height: 100%;
    min-height: 100%;
}

.flex-1 {
    flex: 1;
    background-color: red;
}

.flex-2 {
    display: flex;
    background-color: green;
}

.flex-3 {
    display: flex;
    background-color: black;
} 
 <html>
<head>
    <!-- import bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <!-- import jquery and bootstrap -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body class="d-flex flex-column">
    <header>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <a class="navbar-brand" href="#">
                <img src="" class="d-inline-block align-top" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id='navbarNav'>
                <ul class="navbar-nav navbar-right">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <main class="flex-1">
        <div class="flex-2 d-flex alert-test">
            <h1>TEST</h1>
        </div>
        <div class="flex-3 d-flex justify-content-center align-items-center">
            <h1>TEST</h1>
        </div>
    </main>
</body>
</html>

Ответ №1:

Вот как я заставил ваше решение работать.

  1. Добавлено display: flex; flex-direction: column; flex-1 , чтобы сделать 2-й пункт рабочим.
  2. Добавлено flex-grow: 1 в flex-3 класс, чтобы сделать погружение растянутым в оставшейся области.

Работает только при добавлении display: flex в родительский класс flex-1 свойства flex grow дочернего класса flex-3 .

Надеюсь, это то решение, которое вы ищете.

 html,
body {
  color: #fff;
  height: 100%;
  min-height: 100%;
}

.flex-1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: red;
}

.flex-2 {
  display: flex;
  background-color: green;
}

.flex-3 {
  display: flex;
  flex-grow: 1;
  overflow: auto;
  background-color: black;
} 
 <!-- import bootstrap css -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<body class="d-flex flex-column">
  <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">
        <img src="" class="d-inline-block align-top" alt="" />
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        class="collapse navbar-collapse justify-content-end"
        id="navbarNav"
      >
        <ul class="navbar-nav navbar-right">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="flex-1">
    <div class="flex-2 d-flex alert-test">
      <h1>flex-2 TEST</h1>
    </div>
    <div class="flex-3 d-flex justify-content-center align-items-center">
      <h1>flex-3 Test</h1>
    </div>
  </main>
</body>