How to Make a Footer Fixed in the Page Bottom

Set Footer to Bottom of Page without using Fixed Position.

You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}

.container.body-content {    padding-bottom: 110px;    height: 1000px; /* Force height on body */}
.footer {  position: fixed;  bottom: 0;  background-color: #ffd800;  text-align: center;    right: 0;  left: 0;  background-image: url(/Content/SiteImages/logosmall.png);  background-repeat: no-repeat;  height: 110px;  border-top: 3px solid #082603;}
.footer p {  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%);  color: #082603;  font-size: 150%;  font-family: 'Baskerville Old Face'}

<div class="container body-content">
  <div class="footer">    <p>Quote</p>  </div>
</div>

How to make a footer fixed at bottom?

You can use new properties and values from CSS3.

For instance :

<body>
    <div class="container"></div>
    <div class="footer"></div>
</body>

For the CSS :

.container {
    min-height: 90vh;
}

.footer {
    height: 10vh;
}

This way, your footer will always be at the bottom, even if your container is null

How to stick footer to bottom (not fixed) even with scrolling

I think this might help you.

Just showing you the way how to achieve what you want.

html,body {  margin: 0;  padding: 0;  height: 100%;}#wrapper {  min-height: 100%;  position: relative;}#header {  background: #ededed;  padding: 10px;}#content {  padding-bottom: 100px;  /* Height of the footer element */}#footer {  background: #ffab62;  width: 100%;  height: 100px;  position: absolute;  bottom: 0;  left: 0;}

<div id="wrapper">
  <div id="header">  </div>  <!-- #header -->
  <div id="content">  </div>  <!-- #content -->
  <div id="footer">  </div>  <!-- #footer -->
</div><!-- #wrapper -->

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

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>

How to Make a Footer Fixed in the Page Bottom

Set Footer to Bottom of Page without using Fixed Position.

How to make a footer fixed at bottom?

How to stick footer to bottom (not fixed) even with scrolling

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

Related Topics

Leave a reply