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

Anticipating the arrival of the requested data while utilizing Ajax sending

Is it possible to adjust positioning using just CSS?

What steps can be taken to override the property overflow:hidden specifically for a custom tooltip design

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

Refresh the current page with jQuery Mobile when it is clicked

Trouble with the display:none attribute in Firefox and Chrome

What is the best way to line up my columns when they are split between groups of three and two?

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

Menu/navigation bar designed with floating lines and an array of color options

Add a variety of input values to a div in designated spots

Customizing checkboxes in React with JSS: A step-by-step guide

Currently seeking assistance in replacing an existing Wordpress object with a new one

The method of utilizing React with Redux to display component properties

Center text in the v-text-field label

Ways to ensure that both the Search text field and search button are of equal height

How can I create two buttons on one line in a Struts2 form?

What is the best way to duplicate several HTML input fields using jQuery?

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

With FlexLayout, the content compresses rather than shrinking and taking up the entire width

Display or conceal a YouTube video with a click