html / css以适合整个手机屏幕

Question

I'm trying to use css to fit my form/background image to take up to ENTIRE screen, right now the background image is cut off on the bottom and the form isn't fully taking up all the spaces on the screen instead there are white spaces on the bottom and on the top of the screen. 我正在尝试使用css使我的表单/背景图像适合整个屏幕，现在背景图像在底部被切除，并且表单没有完全占据屏幕上的所有空间，而是屏幕底部和顶部的空白。

Here's the entire code snippet. 这是完整的代码片段。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SpaceMX</title>
  <!-- CORE CSS-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">

<style type="text/css">
html,
body {
    height: 100%;

}
html {
    display: table;
    margin: auto;
    height: 100%;

}
body {
    display: table-cell;
    height: 100%;
    vertical-align: middle;

}
.margin {
  margin: 0 !important;

}
form{
  background: url('http://i.imgur.com/qhn5HDG.png');
  width: 100%;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

</head>

<body class="">



      <form class="login-form">
        <div class="row">
          <div class="input-field col s12 center">
            <p class="center login-form-text" class="responsive-img valign profile-image-login">SpaceMX</p>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-social-person-outline prefix"></i>
            <input id="username" type="text" class="validate">
            <label for="username" class="center-align">Username</label>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-communication-email prefix"></i>
            <input id="email" type="email" class="validate">
            <label for="email" class="center-align">Email</label>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
          </div>
        </div>
        <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input id="password-again" type="password">
            <label for="password-again">Re-type password</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <a href="register.html" class="btn waves-effect waves-light col s12">Register Now</a>
          </div>
          <div class="input-field col s12">
            <p class="margin center medium-small sign-up" color="white">Already have an account? <a href="login.html">Login</a></p>
          </div>
        </div>
      </form>





  <!-- ================================================
    Scripts
    ================================================ -->

  <!-- jQuery Library -->
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!--materialize js-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>



  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-27820211-3', 'auto');
  ga('send', 'pageview');




</body>

</html>

Answer 1

Remove the display: table from the html tag and display: table-cell from the body tag in css. 从html标记中删除display：table，从CSS的body标记中删除display：table-cell。 the body centers in the html tag because of that, which creates the whitespace on both sides. 因此，主体位于html标记的中心，从而在两侧都创建了空白。

Answer 2

Change css to this: 将css更改为此：

html {
    width: 100%;
    height: 100%;

}
body {
    width: 100%;
    height: 100%;
}

form{
  position absolute;
  top: 0;
  left: 0;
  bottom:0;
  right: 0;
  overflow-y: auto;
  background: url('http://i.imgur.com/qhn5HDG.png');
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

Browsers has their own default padding and margin. 浏览器具有自己的默认填充和边距。 So you have to make them equal to zero. 因此，您必须使它们等于零。

form{
  background: url('http://i.imgur.com/qhn5HDG.png');
  width: 100%;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
}

Please tell me if this is what you wanted or not. 请告诉我这是否是您想要的。

html / css以适合整个手机屏幕

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-07-13 18:57:28

解决方案2
0 2017-07-13 19:07:14

解决方案3
0 2017-07-13 19:24:11

html / css以适合整个手机屏幕

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-07-13 18:57:28

解决方案2 0 2017-07-13 19:07:14

解决方案3 0 2017-07-13 19:24:11

解决方案1
0 已采纳 2017-07-13 18:57:28

解决方案2
0 2017-07-13 19:07:14

解决方案3
0 2017-07-13 19:24:11