Materialize.css无法删除页脚和主页之间的空白区域。

时间：2018-04-12 10:59:31

标签： html css frontend materialize

如何删除页脚和主页之间的空白区域？在控制台中查看主要是占用空间。You can see the white space between row and footer in this image.

我从底部删除了填充，没有边距。 Chrome控制台显示其被main占用。 代码在这里。

<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>

`

css是 `

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;
    }

`

1 个答案:

答案 0 :(得分：0)

刚刚在CodePen尝试了它，它似乎与你的代码一起工作正常，但在JSFiddle中尝试它似乎就像你的问题刚刚添加min-height:81vh到左边的项目修复它，也许你的materialize.css已经过时了？这很奇怪。

＆＃13;
＆＃13; 
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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

qOyaW

相关问题
最新问题