How to allows make footer on the bottom but not letting it cover content

Question

I want the footer at the bottom of the page at all times. However, when I use position: absolute;, it goes to the bottom of the page but it covers content that doesn't fit in the page. This is the current CSS styling:

.footer {padding: 2px;
     background-color: #eeeeee;
     color: #0f0f0f;
     text-align: justify;
     font-size: 20px;
     width: 99%;
     bottom: 10px;
     border-radius: 10px;}

Can anyone help me? Thanks

score 1 · Accepted Answer · answered Jan 29 '21 at 04:10

Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page

you need to set fix height in the main tag. I have used 80px of header and 60px of the footer. i have applied this min-height: calc(100vh - 140px); css in wrapper element. if this answer is valuable for you. plz upvote me.

<html> 
  
<head> 
    <style> 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            position: relative;
            height: 80px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 25px 0;
        }

        main {
            position: relative;
            min-height: calc(100vh - 140px);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            position: relative;
            height: 60px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 18px 0;
        }
    </style> 
  
    <head> 
  
        <body> 
            <header><p>Header</p></header>
            <main><p>Body Content</p></main>
            <footer><p>Footer</p></footer>
        </body> 
        <html>

score 0 · Answer 2 · answered Jan 29 '21 at 03:15

HTML

<div class="wrapper">
    <div class="header">
        
    </div>
    <div class="content">
        
    </div>
    <div class="footer">
        
    </div>
</div>

CSS

.wrapper {
  height: 100vh;
}

.footer {
  border: 1px solid green;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 5vh;
}

score 0 · Answer 3 · edited Jan 29 '21 at 09:38

Please try this code, To How to allows make footer on the bottom but not letting it cover content

<html> 
  
<head> 
    <style> 
        #footer { 
            position: fixed; 
            padding: 10px 10px 0px 10px; 
            bottom: 0; 
            width: 100%; 
            /* Height of the footer*/  
            height: 40px; 
            background: grey; 
        } 
    </style> 
  
    <head> 
  
        <body> 
            <center> 
                <div id="container"> 
                    <h1>Hello</h1> 
                    <h1>Good Morning</h1> 
                    <h1>Your footer in below</h1> 
                    <h1>Thank you</h1> 
                    <div id="footer">This is a footer. 
                      This stays at the bottom of the Web page. 
                  </div> 
                </div> 
            </center> 
        </body> 
        <html>

How to allows make footer on the bottom but not letting it cover content

3 Answers3