Minimum height of screen size, with materialize?

Question

Minimum height of screen size, with materialize?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to make a screen of login simple in MaterializeCSS , in it I have a logo, a panel with the login form and the footer, as it is little content, in some screens the page ends and underneath is a content in blank. As in the image:

Noticeafterthefooter,thepageiswhite.IwanttoknowhowIextendmybody(thecoloredsalmonclear)tothepagealwaysstayattheheightofthemonitosorbigger,andneverhavethatwhitespace..

Hereisthecodeforthepage:

<?php/***CreatedbyPhpStorm.*User:LeonardoVilarinho*Date:13/04/2016*Time:13:07*/?><!doctypehtml><htmllang="pt">
<head>
    <meta charset="UTF-8">
    <title>Template Inicial</title>
    <link rel="stylesheet" href="css/materialize.min.css">
</head>

<body>
    <div class="materialize-red lighten-2">
        <div class="row">
    </div>
        <div class="row">
            <div class="col s12 m12 ">
                <img src="img/img-l.jpg" width="180"  class="responsive-img materialboxed center-block" alt="Logomarca">
            </div>
        </div>
        <div class="row">
            <div class="col s12 m12 l6 offset-l3">
                <form>
                    <div class="card white darken-1">
                        <div class="card-content black-text">
                            <span class="card-title">Entrar</span>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id="username" type="text" class="validate">
                                    <label for="username">Usuário</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id="password" type="password" class="validate">
                                    <label for="password">Senha</label>
                                </div>
                            </div>
                        </div>
                        <div class="card-action right-align">
                            <button class="waves-effect waves-light btn amber darken-2"><i class="material-icons "></i>Registrar</button>
                            <button class="waves-effect waves-red btn"><i class="material-icons left"></i>Entrar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <footer class="page-footer">
            <div class="footer-copyright">
                <div class="container">
                    &copy; 2016 Direitos reversados IFTM
                </div>
            </div>
        </footer>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/materialize.min.js"></script>
</body>

</html>

Q: I have always worked with BootStrap, I migrated today to MaterializeCss because of the more modern design.

html5 layout-responsivo materialize

asked by anonymous 13.04.2016 / 19:19

2 answers

0

Split your html page with the tags main and footer . More or less like this:

<body>
   <main> ...seu conteudo </main>
   <footer> ...seu rodape </footer>
</body>

Then add this style to your css:

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

main { flex: 1 0 auto; }

So your rod ( footer ) will always stay at the bottom of the screen and when the content arrives at it it descends alone.
(at the bottom of the page).

13.04.2016 / 20:18

Put a line in a UITabBarItem? Foreach in Post PHP return

score 1 · Accepted Answer

You need to make a sticky footer. There are several ways to do this.

For example, you can put a height to the footer and decrease that height from the previous section.

<body>
  <div class="page-wrap">      
    .
    .
    .          
  </div>
  <footer class="page-footer">
      <div class="footer-copyright">
          <div class="container">
              &copy; 2016 Direitos reversados IFTM
          </div>
      </div>
  </footer>
</body>

CSS Code:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  margin-bottom: -20px; /* Altura do footer */
}
.page-wrap:after {
  content: "";
  display: block;
}
.page-footer, .page-wrap:after {
  height: 20px; 
}
.page-footer {
  background: orange;
}