Question 274103 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Footer Positioning Issue- Staying at the bottom of the page

I’m working on a website, and I’m having trouble with the positioning of the footer. I want the footer to stay at the bottom of the page, but it’s not working as expected.

Here’s the relevant part of my CSS code for the footer:

 footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: black;
    color: #fff;
    padding: 10px 0;
    font-size: small;
    display: flex;
    flex-direction: column;
    align-items: center;
}

here’s the relevant part of my HTML code for the footer:

<footer >
    <div class="footer-content">
     <p>&copy;2023 All rights reserved | This website is made with &hearts; by XXXXXX.</p>
    </div>
</footer>

I realized my footer tag was outside the body tag in my HTML code. I fixed it but still having this issue. I also checked my CSS to ensure that no other styles are conflicting styles or elements in my HTML that might affect the position.

Tags:

2

Answers


  1. 0 
    Instead of position:absolute, used display: flex property.
Your header and footer always visible on viewport in any of the device.

Improve your HTML structure.

<style>
body {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:100vh;
}
header{
    font-size:30px;
}
.content{
    flex:1;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}
footer{
    
}
</style>

<body>
  <header>header of website</header>
  <div class="content">
     your main content section
    <div style="height:1000px">scroll content</div>
  </div>
  <footer >
    <div class="footer-content">
     <p>&copy;2023 All rights reserved | This website is made with &hearts; by XXXXXX.</p>
    </div>
  </footer>
</body>
    Login or Signup to reply.
  2. 0

    I don’t know how your header is positioned (if you have one as a component) but you c an try to do position absolute on the header and group the body and footer together. Ultimately you’ll be arranging all your pages the same way as well. Example: (root folder/pages folder/index.js) is actually rendering (root folder/pages folder/components/index.js). Naming convention isn’t important, naming them same just makes it easier to track. Your (root folder/pages folder/components/index.js) would look somewhat like this:

    Import HeaderComponent from      “./components/header.js”

Import BodyComponent from “./components/body.js”

Import FooterComponent from “./components/footer.js”

Function Index () {
Return (
<>
<div className=“style this as flex, align center, and width 100vw, also add overflow x hidden, then whatever else you want>
<div className=“style as you wish”>
<HeaderComponent> </HeaderComponent>
</div>
<div className=“style as you wish” >
<BodyComponent><BodyComponent>
<FooterComponent><FooterComponent>
</div
<div>
<>
);
};

    export default Index;

    This then gives you liberty to position them however you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search