个人中心
gpt4 book ai didi

html - 去除网页内容下方的空格

转载 作者：行者123 更新时间：2023-12-04 09:13:20 32 4
gpt4 key购买 nike

所以我对 Web 开发比较陌生，并且正在学习 Colt Steele 的 udemy 类(class)，我开始做这个登陆页面，但是当我尝试将 HTML 的高度设置为 100% 时，然后出现空格。我试图寻找一个原因，我认为我的 div 容器的高度导致了一些问题。
The whitespace
P.S:我还尝试使 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>

最佳答案

您需要添加 height: 100%给您的 body和 html以及确保当窗口大小更改时主体动态更改。
My Chrome View
现场演示: (运行下面的代码段并单击全屏以查看图像在页面中被覆盖并且没有空白。)
编辑: Bootstrap 有自己的 alot本地人 flex box classes您可以使用它来代替自定义 CSS。我们可以使用 align-items-center和 h-100确保内容文本保持在中间和好的方面，它也将是响应式的。我们做 not需要使用任何自定义 CSS padding或 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>

关于html - 去除网页内容下方的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63312258/

32 4 0
文章推荐： python 的 subprocess.check_call 说一个非空文件是空的
文章推荐： python - 安装 Visual Studio 19 时找不到 Visual Studio 17
文章推荐： command-line - 有没有办法在 Mac Catalina 上将只读文件系统更改为可写文件系统？
文章推荐： ios - 尝试删除最后一个元素时，带有子项的 SwiftUI (2.0) 列表崩溃
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com