时间戳

首页 > 解决方案 > 删除网页内容下方的空白

html - 删除网页内容下方的空白

问题描述

因此，我对 Web 开发相对较新，并且正在学习 Colt Steele 的 udemy 课程，我开始做这个登陆页面，但在我尝试将 HTML 的高度设置为 100% 时，最后会出现空格。我试图寻找一个原因，我认为我的 div 容器的高度导致了一些问题。

空白

PS：我也尝试使 HTML 高度自动工作正常，但随后在响应模式下再次导致问题，甚至导航栏大小减小并且不覆盖到屏幕末尾。

  body{
        background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
        background-size: cover;
        background-position: center;
        font-family: 'Lato', sans-serif;
        color: white;
        background-repeat: no-repeat;
        border: 1px solid transparent;
    }
    
    html{
        height: auto;
    }
    
    
    #content{
        text-align: center;
        padding: 25%;
    }
    
    h1{
        font-weight: 700;
        font-size: 5em;
    }
    
    hr.new1 {
        border-top: 1px solid white;
    }
      
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Puurefect Match</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" href="#">Contact</a>              
            </li>
            
          </ul>
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link" href="#">Sign In
                  </a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Register
                  </a>
              </li>
          </ul>
          </form>
        </div>

      </div>
        
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="content">
                    <h1>Puurefect Match</h1>
                    <h3>The only Human-Feline Dating app</h3>
                    <hr class="new1">
                    <button class="btn btn-primary btn-lg">Get Started</button>
                </div>
                
            </div>
        </div>
    </div>

</body>

标签： htmlcssbootstrap-4

解决方案

您还需要添加height: 100%到您的body和html以确保当窗口大小发生变化时主体会动态变化。

我的 Chrome 视图

现场演示：（运行下面的片段并单击全屏以查看图像在页面中的封面并且没有空白。）

编辑： Bootstrap 有自己alot的本机flex box classes，您可以使用它来代替自定义 CSS。我们可以只使用align-items-centerandh-100来确保内容文本保持在中间，并且好的内容也将是响应式的。我们确实not需要使用任何自定义 CSSpadding或margin内容。

body {
  background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: white;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  height: 100%;
}

html {
  height: 100%;
}

body {}

#content {
  text-align: center;
  color: white;
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr.new1 {
  border-top: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PURFECT MATCH</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Puurefect Match</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#">Contact</a>
          </li>

        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Sign In
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register
              </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-lg-12 mx-auto">
        <div id="content">
          <h1>Puurefect Match</h1>
          <h3>The only Human-Feline Dating app</h3>
          <hr class="new1">
          <button class="btn btn-primary btn-lg">Get Started</button>
        </div>

      </div>
    </div>
  </div>
</body>

推荐阅读