页面底部很难用，当我滚动时，底部有一个空白答案

【问题标题】：Having hard time with page's bottom, when I scroll there is a white space at the bottom页面底部很难用，当我滚动时，底部有一个空白
【发布时间】：2020-01-08 08:12:37
【问题描述】：

第一次创建我的致敬页面，但在 css 中遇到了无法解决的问题。我的背景上有 img ，最重要的是，我试图在具有 opacity 属性的同时将段落放在中心。当文本变得略长于 1 页时。我看到底部有一些空白，所以我的 img 会中断，即使它设置为 background-image: cover;

我尝试通过放置一些边距属性和 display: fixed 属性来处理 html、body css。

html {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  height: 100%;
}

body {
  height: 100%;
}

* {
  margin: 0px;
}

header {
  background-image: url("images/city.jpeg");
  height: 100vh;
  background-size: cover;
  background-position-y: 65%;
  background-position: fixed;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: absolute;
}

#navi {
  float: right;
}

ul {
  float: center;
  list-style-type: none;
  margin-top: 25px;
  margin-right: 25px;
}

ul li {
  display: inline-block;
}

ul li a {
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  border: 1px solid #fff;
}

#logo {
  float: left;
  width: 150px;
  margin-top: 10px;
  position: absolute;
  margin-left: 400px;
  color: black;
  font-size: 20px;
  border-color: white;
  border-style: solid;
}

.title {
  padding: 300px 300px;
  background-color: rgba(30, 23, 23, 0.5);
  border-radius: 5px;
  margin-right: 300px;
  margin-left: 300px;
  box-sizing: border-box;
  color: #fff;
}

#lists {
  padding-left: 0px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Tribute</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <div class="main">

      <ul id="navi">
        <li><a href="#"> About</a></li>
        <li><a href="#"> Music</a></li>

      </ul>
    </div>
    <fieldset id="logo">

      <legend style="color:white" ;> NEW YORK CITY</legend>


    </fieldset>

    <div class="title">
      <h1> New York City</h1>
      <p>New York City traces its origins to a trading post founded by colonists from the Dutch Republic in 1624 on Lower Manhattan; the post was named New Amsterdam in 1626. ... New York served as the capital of the United States from 1785 until 1790. It
        has been the country's largest city since 1790</p>
      <h2> Brief History</h2>
      <ul id="lists">
        <li><strong>1790 </strong> - Population: 33,131. New York becomes the largest city in America, surpassing Philadelphia.</li><br />
        <li><strong>1801 </strong> - New York Evening Post newspaper begins publication.</li><br />
        <li><strong>1805 </strong> - Yellow fever epidemic occurs, during which as many as 50,000 people are said to have fled the city</li><br />
        <li><strong>1811 </strong> - May 19: Close to 100 buildings burn down on Chatham Street.</li>
        <li><strong>1817 </strong> - New York Stock & Exchange Board[37] established.</li>
        <li><strong>1845 </strong> - New York City Police Department, and New York Art Union established. </li>
        <li><strong>1863 </strong> - July 13–16: Approximately 50,000 people riot in protest of President Abraham Lincoln's announcement of a draft for troops to fight in the American Civil War.[13] Over 100 are killed and many African Americans flee the
          city. The film Gangs of New York takes place during the draft riots.. </li>
        <li><strong>1871 </strong> - Grand Central Depot opens. </li><br />
        <li><strong>1872 </strong> - Metropolitan Museum of Art opens. </li><br />
        <li><strong>1878 </strong> - St. Patrick's Cathedral opens.. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1886 </strong> - October 28: Statue of Liberty dedicated. </li><br />
        <li><strong>1890 </strong> - Population: 1,710,715. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1886 </strong> - Brooklyn Bridge opens. </li><br />
      </ul>
    </div>
  </header>
</body>

</html>

【问题讨论】：

标签： html css removing-whitespace

【解决方案1】：

尝试移除高度：100vh；和位置：绝对；从标题。

header {
background-image: url("images/city.jpeg");
// height: 100vh;
background-size: cover;
background-position-y: 65%;
background-position: fixed; 
background-attachment: fixed;
background-repeat: no-repeat;
// position: absolute;
}

【讨论】：

哇，谢谢它的工作。 height: 100vh 和 position: absolute; 是否每次都相互冲突？