The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

Question

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

For some reason, I'm having trouble getting the footer to properly align at the bottom of the page. My body only seems to go halfway up the page. I tried wrapping everything in a main tag and setting a height on that, but it always ends up stopping at the same point. It's as if it's not recognizing the viewport properly and causing the issue. I'm new to coding, so any general advice on how to improve this would be greatly appreciated. Thanks in advance!

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;
}
(...)
</footer>
  </div>

html css

Answer 1

Answer №1

The reason for the footer not displaying correctly at the bottom is due to the line max-height: 100vh in #tribute-info. Once that line is removed, the footer will appear as intended.

It's important to note that the <header> tag should be within the <body> section, rather than being placed between the <head> and <body>.

Answer 2

The reason for the footer not displaying correctly at the bottom is due to the line max-height: 100vh in #tribute-info. Once that line is removed, the footer will appear as intended.

It's important to note that the <header> tag should be within the <body> section, rather than being placed between the <head> and <body>.

Answer 3

Answer №2

I made some adjustments to the styles by removing the max-height property and relocating the header tag within the body tag.

#end
#pres
#prior
#tribute-info

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;
}

#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;
  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;
  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;
  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 -->



<body>
  <header>
    <h1 id='title'>President Theodore "Teddy" Roosevelt </h1>
    <p>"Walk softly, and carry a big stick"</p>
  </header>

  <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>

Answer 4

I made some adjustments to the styles by removing the max-height property and relocating the header tag within the body tag.

#end
#pres
#prior
#tribute-info

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;
}

#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;
  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;
  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;
  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 -->



<body>
  <header>
    <h1 id='title'>President Theodore "Teddy" Roosevelt </h1>
    <p>"Walk softly, and carry a big stick"</p>
  </header>

  <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>

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

Answer №1

Answer №2

Similar questions

How to prevent npm from being accessed through the command prompt

Is it possible to create an input field exclusively for tags using only CSS?

The correct method for including a CSS file in a Vue.js application

Rotate object within HTML table

Video Autoplay within an image carousel - A seamless integration

Ways to hide the loading spinner on a web browser

Fluid overlap of divs in Bootstrap framework

Create a 2x2 HTML table where the first row remains undivided

What is the best way to show and hide text by toggling a link instead of a button?

Using HTML as an argument in a JavaScript function

When attempting to select an option from the dropdown menu, I encounter an issue where the

I am having trouble with my image not resizing properly within the flexbox when using height and max-height properties

Issue with Bootstrap columns being misaligned on mobile devices

Utilizing consistent CSS styles across VueJS components

When using Javascript's querySelector, often times it returns null

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

Tips for maintaining the original ng-click initialized value as the ng-init value after the page is refreshed

React Hamburger Menu not working as intended

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

What could be the reason for the absence of margin on the top and bottom