为什么我的代码没有在移动视图中覆盖整个屏幕，它只覆盖了屏幕的一半

Question

please help me out with this code.请帮我解决这个代码。 It looks great in the pc but covering only half of the screen in the mobile view.它在 PC 中看起来很棒，但在移动视图中只覆盖了一半的屏幕。 Do guide me out with this issue.请指导我解决这个问题。 Below is my code of HTML and CSS.下面是我的 HTML 和 CSS 代码。 I will be very grateful for your help.我将非常感谢您的帮助。 I think there is some problem with the container-fluid class which is, as it is not covering the whole screen我认为容器流体类存在一些问题，因为它没有覆盖整个屏幕

 body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>

Answer 1

Add this style @375px media queries for iPhone为iPhone添加此样式@375px 媒体查询

@media only screen and (max-width:375px) { 
   #Head .container-fluid{ 
       padding: 0;    
   }
}

Working demo工作演示

 body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } } @media only screen and (max-width:375px) { #Head .container-fluid{ padding: 0; } }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>

为什么我的代码没有在移动视图中覆盖整个屏幕，它只覆盖了屏幕的一半

问题描述

1 个解决方案

解决方案1
0 2020-09-26 15:28:22

为什么我的代码没有在移动视图中覆盖整个屏幕，它只覆盖了屏幕的一半

问题描述

1 个解决方案

解决方案1 0 2020-09-26 15:28:22

解决方案1
0 2020-09-26 15:28:22