Materialize 바닥글을 맨 아래에 표시하는 방법

8712 단어 CSSMaterializeMaterialDesign
최근 간단한 웹 앱을 만들 때는 Materialize라는 CSS 프레임워크를 사용합니다.

다만 콘텐츠가 적은 웹 앱이라면 바닥글이 의도하지 않은 위치에 표시되는 경우가 있죠. . .

그러한 경우에 바닥글이 화면 도중에 오르지 않도록 조정하는 방법을 소개합니다.

Materialize란?



원래 Materialize 란 무엇입니까? 라고 보다 간단하게 설명하면 Bootstrap 같은 CSS 프레임워크입니다.

Materialize는 Google이 제창하는 머티리얼 디자인을 도입한 프레임워크입니다. 통상은 모든 스타일을 스스로 작성할 필요가 있습니다만,Materialize는 자주 사용되는 스타일이 미리 정의하고 있으므로, 그것을 이용하는 것으로 정돈된 디자인의 페이지를 작성 가능합니다.
인용 소스 : Materialize #001 - 건설 준비 | dayjournal memo

콘텐츠가 적은 바닥글



콘텐츠가 적은 앱에 Materialize를 맞추어 만들어 봅시다.
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <link rel="stylesheet" href="css/main.css">

  <!--Let browser know website is optimized formobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>かんたんなWebアプリ</title>
</head>

<body>
  <header>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center"></i>かんたんなWebアプリ</a>
      </div>
    </nav>
  </header>

  <main>
    <p>かんたんなWebアプリ</p>
  </main>

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Footer Content</h5>
          <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2018 Copyright Yusuke Ito(@yusukeito58)
      </div>
    </div>
  </footer>

  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>

로드하는 파일은 Materialize용 CSS( css/materialize.min.css )와 JavaScript( js/materialize.min.j> ), 그 외에 앱용 CSS( css/main.css )만 됩니다.

앱은 세 가지 요소로 구성됩니다.
  • header
  • main
  • footer

    • 이 앱을 보면 바닥글이 main 바로 뒤에 표시됩니다.



    별로 좋지 않아서 조정합시다.

    바닥글을 맨 아래에 표시



    콘텐츠가 적을 때는 화면 하단에 표시되도록 CSS로 조정합니다.
    body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}



    이제 콘텐츠가 적은 경우에도 바닥글이 화면 하단에 표시됩니다.
    tify로 Qiita 스타일 UI 만들기 - 목차
    【Kotlin】Navigation(AAC)와 UIComponent를 연계한다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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