我不知道为什么，但我似乎无法让这个页脚正确地到达底部，我的 body 似乎只到达页面的一半？我将整个东西包裹在 main 中，看看如果我设置一个高度是否可以修复它，它似乎每次都只达到相同的高度。就像它没有捕捉到视口(viewport)或其他东西，导致它只向上移动大约一半。另外，我是一个新编码员，请保持轻松，所以如果您的 awnser 只是提供一般性建议来改进我的所有内容。提前致谢!
h1 {
font-family: 'Dancing Script', cursive;
text-align: center;
font-size: 4vmin;
}
p {
text-align: center;
font-size: 3vmin;
}
li {
font-size: 3vmin;
}
header {
text-align: center;
height: auto;
width: auto;
background-color: white;
box-shadow: 2px 2px 2px 1px gray;
margin-bottom: 2%;
margin-right: 1%;
}
#main {
position: relative;
min-height: 100vh;
}
#img-div {
display: flex;
margin: auto;
justify-content: center;
flex-direction: column;
background-color: white;
box-shadow: 0px 1px 2px 5px gray;
max-width: 100vw;
max-height: 100vh;
}
#image {
box-shadow: 0px 1px 3px 5px gray;
max-width: 70%;
margin-left: 15%;
margin-top: 1%;
}
#tribute-info {
max-width: 100vw;
max-height: 100vh;
}
#young {
background-color: white;
box-shadow: 0px 1px 3px 5px gray;
}
#youngteddy {
width: 85%;
margin-left: 7%;
box-shadow: 0px 1px 3px 5px gray;
}
#prior {
max-width: 100vw;
max-height: 100vh;
box-shadow: 0px 1px 3px 5px gray;
background-color: white;
}
#priorimg {
max-width: 70%;
margin-left: 15%;
box-shadow: 0px 1px 3px 5px gray;
}
#pres {
max-width: 100vw;
max-height: 100vh;
background-color: white;
box-shadow: 0px 1px 3px 5px gray;
}
#president {
max-width: 40%;
margin-left: 30%;
box-shadow: 0px 1px 3px 5px gray;
}
#end {
max-width: 100vw;
max-height: 100vh;
margin-top: 10%;
box-shadow: 0px 1px 3px 5px gray;
background-color: white;
}
#endimg {
max-width: 100%;
margin-left: 20%;
box-shadow: 0px 1px 3px 5px gray;
}<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- Link to FCC Tester In top Left -->
<header>
<h1 id='title'>President Theodore "Teddy" Roosevelt </h1>
<p>"Walk softly, and carry a big stick"</p>
</header>
<body>
<div id='main'>
<div id='img-div'>
<img id='image' src='https://www.buddenbrooks.com/pictures/70094_1.jpg?v=1593026042' alt='Theodore after hunting a cheetah'>
<p id='img-caption'>Theodore Roosevelt kneeling in front of a cheetah</p>
</div>
<div id='tribute-info'>
<div id='young'>
<h1>
<B>Teddy's Youth</B>
</h1>
<img id='youngteddy' src='https://image.pbs.org/video-assets/pbs/roosevelts/142017/images/mezzanine_487.jpg.crop.1920x1080.jpg' alt='Theodore Roosevelt as a young child'>
<ul id=y list>
<li><b>1858</b>: Theodore was Born to Martha and Bulloch Roosevelt</li>
<li><b>1870</b>: Begins a physical regime that he continues throuout his life.
<li><b>1876</b>: Begins study at Harvard University</li>
<li><b>1878</b>: Meets his first wife, Alice Hathaway Lee
<li><b>1880</b>: Graduates Harvard Magna Cum Laude, and joins the Republican Party</li>
</div>
<div id='prior'>
<h1>Prior to his Presidency</h1>
<img id='priorimg' src='https://publicradio1-wpengine.netdna-ssl.com/newscut/files/2015/07/roosevelt.jpg' alt='President Theodore Roosevelt during his time as a RuffRider standing beside his horse'>
<ul>
<li><b>1882</b>: Publishes first major literary work, 'The Naval War of 1812'</li>
<li><b>1884</b>: Mother and Wife die of illness</li>
<li><b>1888</b>: Publishes several books, including Life of Gouverneur Morris, Ranch Life and the Hunting Trail, and Essays in Practical Politics</li>
<li><b>1889</b>: Starts as U.S. Civil Service Commissioner in Washington, DC</li>
<li><b> 1895</b> Reigns from Civil Service to become Police Commisioner of New York.</li>
<li><b>1897</b>: Appointed Assistant Seceratary of the Navy by William Mckinley</li>
<li><b>1898</b>: Forms the 'Rough-Riders' and serves as a Colonel in Cuba during the Spanish-American War</li>
</ul>
</div>
<div id='pres'>
<h1>Becoming President Theodore Roosevelt</h1>
<img id='president' src='https://upload.wikimedia.org/wikipedia/commons/d/df/Theodore_Roosevelt_circa_1902.jpg' alt='President Theodore Roosevelt'>
<ul>
<li><b>1901</b>: Serves as Vice President from March to September</li>
<li><b>1901</b>: Becomes President in September, the youngest president ever.</li>
<li><b>1902</b>: Begins anti-trust lawsuits to dissolve 42 monopolies</li>
<li><b>1903</b>: Establishes Pelican Island, FL as first federal bird reserve and Begins building Panama Canal</li>
<li><b>1904</b>:Re-elected president, established United States Forest Service</li>
<li><b>1905</b>:Establishes Wichita Forest, OK as first federal game preserve. Establishes Russo-Japaneese Peace Treaty</li>
<li><b>1906</b>: Established many national parks. Visited Panama Canal, becoming the first president to do so. Won the Nobel Peace Prize.</li>
</ul>
</div>
<div id='end'>
<h1>End of an era</h1>
<img id='endimg' src='https://allthatsinteresting.com/wordpress/wp-content/uploads/2016/10/pointing.jpg' alt='Theodore Roosevelt giving a speech after just being shot'>
<ul>
<li><b>1909</b>: End of his Presidency. Departs for year-long African safari with son Kermit</li>
<li><b>1910</b>: Accepts Peace Prize in Norway. Publlishes "African Game Trails", and returns to New York from travels around the globe.</li>
<li><b>1912</b>:Pressured to accept Presidental nomination. Becomes presidential cantidate of the "Bull Moose" or Progressive party. Deliveres famous speech despite being shot in the chest before it.</li>
<li><b>1913</b>: Publishes "Theodore Roosevelt - An Autobiography and History as Literature and Other Essays"</li>
<li><b>1914</b>:Embarks on an expedition to explore an uncharted tributary of Amazon River, which he nearly dies during. Publishes two books named "Through the Brazilian Wilderness" and "Life Histories of African Game Animals"</li>
<li><b>1918</b>: Publishes "The Great Adventure".</li>
<li><b>1919</b>: Dies in sleep at Sagamore Hill of a coronary embolism (arterial blood clot), age 60</li>
</ul>
</div>
</div>
<footer>
<div id='tlink-container'>
<p>Intrested in learning more about the Bull-Moose?
<a id='tribute-link' target="_blank" href='https://www.britannica.com/biography/Theodore-Roosevelt'>Click here</a>
</div>
</footer>
</div>最佳答案
线路max-height: 100vh #tribute-info 中的内容就是造成这种情况的原因。如果将其删除，页脚将正确显示在底部。
此外，<header>标签是 <body> 的一部分，不在 <head> 之间和<body> .
关于html - 正文仅在页面的中间位置移动，导致我的页脚显示在页面的中间位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67665368/