Issue
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. 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>
</htmlSolution
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>Answered By - pier farrugia
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.