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

Question

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

score 1 · Accepted Answer · answered Jun 22 '23 at 15:24

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>

But can you try without giving the grid property to the body? — mits, Jun 22 '23 at 15:39
you can put grid on body. Would be cleaner to encapsulate header, main, and footer inside a div with grid property. — pier farrugia, Jun 22 '23 at 16:21

score 0 · Answer 2 · answered Jun 22 '23 at 15:07

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

answered Jun 22 '23 at 15:07

Pranav S Lal

1

_, no bro its not done. Footer in case of content are large doesn't appear in the end instead it appears in display end. – mits Jun 22 '23 at 15:27

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

2 Answers2