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

Html – Absolute footer at the end of content and at the bottom of viewport display when there is lesser content

how can i make footer absolute i.e. at the end of content of main section and footer at the bottom of viewport display when there is lesser content in main section.I have tried with the following code please have a glance. If you donot understand my problem please ask in comment rather than giving downvote. In the below code when content in section increases footer looses its fixed position and move up. So let me know what can be done.

html{
    height:100%;
    box-sizing: border-box;
}
*,*:after,*:before{
    box-sizing: inherit;
}
body{
    position: relative;
    margin: 0;
    min-height: 100%;
    font-family: 'Roboto', sans-serif !important;
    background: #f2f2f2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    min-width:250px;
    overflow-x:scroll
}
main{
    min-height: 100%;
    margin: 0;
}
footer{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    
    background: #333;
    color: #fff;
    text-align: center;
    padding:  0 2rem;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <header>
        this is header
    </header>
    <main>
        1. Hello world
        <h1>1. Hello world</h1>
        <h1>2. Hello world</h1>
        <h1>3. Hello world</h1>
        <h1>4. Hello world</h1>
        <h1>5. Hello world</h1>
        <h1>6. Hello world</h1>
        <h1>7. Hello world</h1>
        <h1>8. Hello world</h1>
        <h1>9. Hello world</h1>
        <h1>10. Hello world</h1>
        <h1>11. Hello world</h1>
        <h1>12. Hello world</h1>
        <h1>13. Hello world</h1>
        <h1>14. Hello world</h1>
        <h1>15. Hello world</h1>
        <h1>16. Hello world</h1>
        1. Hello world
        <h1>1. Hello world</h1>
        <h1>2. Hello world</h1>
        <h1>3. Hello world</h1>
        <h1>4. Hello world</h1>
        <h1>5. Hello world</h1>
        <h1>6. Hello world</h1>
        <h1>7. Hello world</h1>
        <h1>8. Hello world</h1>
        <h1>9. Hello world</h1>
        <h1>10. Hello world</h1>
        <h1>11. Hello world</h1>
        <h1>12. Hello world</h1>
        <h1>13. Hello world</h1>
        <h1>14. Hello world</h1>
        <h1>15. Hello world</h1>
        <h1>16. Hello world</h1>
    </main>
    <footer>
                this is footer
    </footer>   
</body>
</html
Tags:

2

Answers


  1. 0 
    footer{
position: fixed;
width: 100%;
}

    change the position from absolute to fixed and add width 100% the footer will be fixed to the bottom of viewport

    Login or Signup to reply.
  2. 0

    what about using grid? auto for header, 1fr for main, auto for footer
    if you have all you h1 footer is at the end, after main
    if you delete from 9 till the end, footer is at the end of the viewport

    *,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif !important;
  background: #f2f2f2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: 250px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

main {
  margin: 0;
  overflow-x: scroll;
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 0 2rem;
}
    <header>
  this is header
</header>
<main>
  1. Hello world
  <h1>1. Hello world</h1>
  <h1>2. Hello world</h1>
  <h1>3. Hello world</h1>
  <h1>4. Hello world</h1>
  <h1>5. Hello world</h1>
  <h1>6. Hello world</h1>
  <h1>7. Hello world</h1>
  <h1>8. Hello world</h1>
  <h1>9. Hello world</h1>
  <h1>10. Hello world</h1>
  <h1>11. Hello world</h1>
  <h1>12. Hello world</h1>
  <h1>13. Hello world</h1>
  <h1>14. Hello world</h1>
  <h1>15. Hello world</h1>
  <h1>16. Hello world</h1>
  1. Hello world
  <h1>1. Hello world</h1>
  <h1>2. Hello world</h1>
  <h1>3. Hello world</h1>
  <h1>4. Hello world</h1>
  <h1>5. Hello world</h1>
  <h1>6. Hello world</h1>
  <h1>7. Hello world</h1>
  <h1>8. Hello world</h1>
  <h1>9. Hello world</h1>
  <h1>10. Hello world</h1>
  <h1>11. Hello world</h1>
  <h1>12. Hello world</h1>
  <h1>13. Hello world</h1>
  <h1>14. Hello world</h1>
  <h1>15. Hello world</h1>
  <h1>16. Hello world</h1>
</main>
<footer>
  this is footer
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search