个人中心
gpt4 book ai didi

html - 正文只在页面的一半左右，导致我的页脚显示在页面的中间

转载 作者：行者123 更新时间：2023-12-04 07:37:33 27 4
gpt4 key购买 nike

我不知道为什么，但我似乎无法让这个页脚正确地到底部，我的 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/

27 4 0
文章推荐： r - 将数据框的所有列合并到一个回归中
文章推荐： ruby-on-rails - 在 Rails 3 中在运行时更改语言环境
文章推荐： ruby-on-rails - 相同的枚举不能在 rails 的不同列中工作
文章推荐： Coq:列表对的证明
行者123
个人简介

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

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