BootStrap4에서 다중 요소 높이의 합계를 100%로 설정

5287 단어 bootstrap4
아래 예제는 제목(h1)의 행, 레이블 및 텍스트 영역의 행과 버튼의 행을 더하여 100% 높이가 되도록 합니다.

그 바로 부모의 요소로 d-flex flex-column 를 지정하고 있기 (위해)때문에, 전술의 3 행은 세로로 줄지어 있는 flex-item으로서 취급됩니다. 또한 레이블과 텍스트 영역의 행은 row flex-grow-1 를 지정하므로 3줄 합계가 100% 높이가 되도록 레이블과 텍스트 영역의 행 높이가 넓어집니다.

또, 곳곳에 h-100 를 지정해 브라우저의 높이 전체를 사용하고 있습니다만, d-flex flex-column 의 아이 요소는 자동적으로 높이가 정해지기 때문에 h-100 는 지정하지 않습니다.
<!DOCTYPE html>
<html class="h-100">![h-100.png](https://qiita-image-store.s3.amazonaws.com/0/157704/2a7a4fb8-0380-b78f-7a0f-de621d07558f.png)

  <head>
    <meta charset="utf-8" />
    <title>見出しとコンテンツを足して高さ100%</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
  <body class="h-100">
    <div class="container h-100 d-flex flex-column">
      <h1 class="bg-info">見出し</h1>
      <div class="form-group row flex-grow-1" style="height: 0;">
        <label class="col-3">私はボタンですか？</label>
        <div class="col-9 h-100">
          <textarea class="form-control h-100">いいえ、あなたはラベルです。</textarea>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-9 offset-3">
          <button class="btn btn-primary">私がボタンです。</button>
        </div>
      </div>
    </div>
  </body>
</html>

이런 식으로 나타납니다.



덧붙여 .flex-grow-1 의 태그에 style="height: 0;" 를 지정하고 있는 것은, 이 지정이 없으면 Webkit에서는 높이가 화면의 하단까지 닿지 않기 때문입니다. Firefox도 Edge도 IE조차도, style="height: 0;" 의 지정이 없어도 정상적으로 표시되는데, Chrome만 이상하다…….
bootstrap의 row로 중앙을 맞추려고했을 때의 이야기
Bootstrap으로 SMS 스타일 화면 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage