Reputation: 1005

Materialize.css unable to remove empty space between footer and main.

How can I remove this empty space between footer and main? Looking in the console it shows main is occupying the space.You can see the white space between row and footer in this image.

I have removed padding from bottom and there is no margin. Chrome console shows its occupied by main. The code is here.`

<html>
    <head
      <!--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="materialize/css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="css/test.css" media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body style="height: 100%; ">
    <header></header>

     <main class="" style="height: ; padding-bottom: 0px;">
        <div class="row" style="margin: 0px;">
      <div class="col s12 m6 l6" style="background-color: #4682b4; min-height: 80vh; position: ;">
        <!-- Promo Content 1 goes here -->

         <div class="first_qoute quote " ><h5 style="color: white;">Discover Udacity</h5></div>
            <div class="second_quote quote"><h5 style="color: white;">Develop the next big thing</h5></div>
            <div class="third_quote quote"><h5 style="color: white;">Meet awesome people at Udacity</h5></div>
      </div>
      <div class="col s12 m6 l6 valign-wrapper" style="background-color: ; min-height: 80vh; display: ; height: ; position: relative; overflow: hidden; width: ;">
        <!-- Promo Content 2 goes here -->

    <div class="col s12 m12 l6 " style="margin: 0 auto; background-color: white; display: block; position: relative; float: none ; ">
   <div class="row" style="">
    <form class="col s12 l12 m12">
      <div class="row">
        <div class="input-field col s12 l12 m12">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate">
          <label for="icon_prefix">First Name</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s12 l12 m12">
          <i class="material-icons prefix">phone</i>
          <input id="icon_telephone" type="tel" class="validate">
          <label for="icon_telephone">Telephone</label>
        </div>

      </div>
          <div class="rol col s6" style="float: right">
        <label style=''>
          <a class='pink-text' href='#!' style=""><b>Forgot Password?</b></a>
                    </label></div>
        <br/>
    <div class="row ">
<button class="loginBtn loginBtn--google">
  Login with Google
</button>
    </div>

    </form>
  </div>
</div>



    </div>
 </div>
    </main>
<footer class="page-footer" style="margin-top:;">
      <div class="container">
        <div class="row" style="padding: 0px;">
          <div class="col l3 m3 s12" style="padding: 0px">
            <h8 class="white-text">About</h8>
          </div>
        <div class="col l3 m3 s12" style="padding: 0px">
            <h8 class="white-text">Blog</h8>
        </div>
         <div class="col l3 m3 s12" style="padding: 0px">
            <h8 class="white-text">Terms</h8>
        </div>
          <div class="col l3 m3 s12" style="padding: 0px">
             <h8 class="white-text">Developres</h8>
         </div>
       </div>
     </div>
     <div class="footer-copyright" style="height: 20px;">
       <div class="container" style="text-align: center;">
          <ul>
           <li>Made with &hearts; by team!</li>
          </ul>
       </div>
     </div>
   </footer>
      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
    </body>
  </html>

the css is `

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

  main {
    flex: 1 0 0;
  }

/* Shared login button google orean.css */
.loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */


/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}

.quote {
    pading: 10px;
    margin: 8%;
    font-family: arial;
    text-align: center;
   }
.first_qoute{
    margin-top: 20vh;
    }

Upvotes: 0

Answers (1)

Emiliano Montesdeoca

Reputation: 364

Just tried it in CodePen and it seems to be working fine with your code, but trying it in JSFiddle seems to be like your problem just added min-height:81vh to the left item fixed it, maybe your materialize.css is outdated? It's weird.

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

  main {
    flex: 1 0 0;
  }

/* Shared login button google orean.css */
.loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */


/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}

.quote {
    pading: 10px;
    margin: 8%;
    font-family: arial;
    text-align: center;
   }
.first_qoute{
    margin-top: 20vh;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.css" rel="stylesheet"/>
<html>

<head <!--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="materialize/css/materialize.min.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="css/test.css" media="screen,projection" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="height: 100%; ">
  <header></header>

  <main>
    <div class="row" style="margin: 0px;">
      <div class="col s12 m6 l6" style="background-color: #4682b4; min-height: 81vh; position: ;">
        <!-- Promo Content 1 goes here -->

        <div class="first_qoute quote ">
          <h5 style="color: white;">Discover Udacity</h5>
        </div>
        <div class="second_quote quote">
          <h5 style="color: white;">Develop the next big thing</h5>
        </div>
        <div class="third_quote quote">
          <h5 style="color: white;">Meet awesome people at Udacity</h5>
        </div>
      </div>
      <div class="col s12 m6 l6 valign-wrapper" style="background-color: ; min-height: 80vh; display: ; height: ; position: relative; overflow: hidden; width: ;">
        <!-- Promo Content 2 goes here -->

        <div class="col s12 m12 l6 " style="margin: 0 auto; background-color: white; display: block; position: relative; float: none ; ">
          <div class="row" style="">
            <form class="col s12 l12 m12">
              <div class="row">
                <div class="input-field col s12 l12 m12">
                  <i class="material-icons prefix">account_circle</i>
                  <input id="icon_prefix" type="text" class="validate">
                  <label for="icon_prefix">First Name</label>
                </div>
              </div>
              <div class="row">
                <div class="input-field col s12 l12 m12">
                  <i class="material-icons prefix">phone</i>
                  <input id="icon_telephone" type="tel" class="validate">
                  <label for="icon_telephone">Telephone</label>
                </div>

              </div>
              <div class="rol col s6" style="float: right">
                <label style=''>
          <a class='pink-text' href='#!' style=""><b>Forgot Password?</b></a>
                    </label></div>
              <br/>
              <div class="row ">
                <button class="loginBtn loginBtn--google">
  Login with Google
</button>
              </div>

            </form>
          </div>
        </div>
      </div>
  </main>
     <div class="col s12 m6 l6" style="background-color: red; min-height: 80vh; position: ;">
       
       
    </div>

qOyaW

Upvotes: 1

Materialize.css unable to remove empty space between footer and main.

Answers (1)

Related Questions