Reputation: 15

Making a footer stay at the bottom of the page both in mobile view and desktop view

In mobile view, the footer is not remaining at at the bottom of the page. It stays somewhere above the bottom. I want the footer to stay at the bottom always in mobile view and desktop view. But the footer should not be visible always, if the site has much contents, user will have to scroll down to see the footer. What changes do I need to make in the css file to make the footer stay at the bottom of the page always?

html { height: 100%; }
body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#303036;
	margin:0px;
	background:url('../images/diagonal_noise.png');
	background-repeat:repeat;
	min-width:1100px;
	overflow:auto;
	height:100%; 
}

 #mainPart{
    margin:0 auto;
    }
    
 .container{
	overflow:hidden;
	clear:both;
	max-width:1080px;
	margin:20px auto 40px auto;
}
footer {
  color: white;
  width:100%;
  padding:0;
  display:block;
  clear:both;
  height: 40px; /* added */
}

.footrow{
	overflow:hidden;
	background-color: #111;
	display:block;
	
}

.footrow2{
	overflow:hidden;
	background-color: #002c42;
	display:block;
	padding:15px;
}

.foot{
	max-width:1080px;
	margin:0 auto;
	font-size:11px;
	line-height:18px;
}

.foot-p{
	font-weight: 600;
	padding:2px;
	color:#66e355 !important;
}

.half-width {
    width: 50%;
	float:left;
}

.quarter-width {
    width: calc(25% - 30px);
	float:left;
	padding:15px;
}

#social2 {
    display: block;
    background-color: transparent;
    float: left;
    margin: 0 auto;
}

.sc-icn2 {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
}

 <html>
        <head>

</head>
 <body>
    <div id="mainPart">

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

    </div>
    
    <footer>
    <div class="footrow" >
        <div class="foot">
            <div class="quarter-width">
                
                <div>
                   
                </div>
            </div>
            <div class="quarter-width">
                
            </div>
            <div class="quarter-width">
               
                <div id="social2">
                    
                </div>
            </div>
            <div class="quarter-width">
        
            </div>
        </div>
    </div>
    <div class="footrow2"   >
        <div class="foot">
            <div class="half-width">
            </div>
            <div class="half-width">
            </div>
        </div>
    </div>
</footer>
  
</body>

</html>

Upvotes: 0

Answers (4)

VSM

Reputation: 1785

This works for you. Try it.

For that add enough content in side the .container div. And add min-height value to .container as below.

body {
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   color:#303036;
   margin:0px;
   background:url('../images/diagonal_noise.png');
   background-repeat:repeat;
   min-width:100%;
   overflow:auto;
   height:100%; 
 }
.container{
   overflow:hidden;
   clear:both;
   max-width:1080px;
   margin:20px auto 40px auto;
   /*new style*/
   min-height:768px;
 }
 @media only screen and (max-width: 768px) {
   .container{
      max-width: 80%;
      margin:20px auto 40px auto;
      min-height:480px;
   }
 }

    html { height: 100%; }
    body {
        font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#303036;
        margin:0px;
        background:url('../images/diagonal_noise.png');
        background-repeat:repeat;
        min-width:100%;
        overflow:auto;
        height:100%; 
    }
    
     #mainPart{
        margin:0 auto;
        }
     .container{
        overflow:hidden;
        clear:both;
        max-width:1080px;
        margin:20px auto 40px auto;
        min-height:768px;
    }
    footer {
      color: white;
      width:100%;
      padding:0;
      display:block;
      clear:both;
      height: 40px; /* added */
    }
    
    .footrow{
        overflow:hidden;
        background-color: #111;
        display:block;
    
    }
    
    .footrow2{
        overflow:hidden;
        background-color: #002c42;
        display:block;
        padding:15px;
    }
    
    .foot{
        max-width:1080px;
        margin:0 auto;
        font-size:11px;
        line-height:18px;
    }
    
    .foot-p{
        font-weight: 600;
        padding:2px;
        color:#66e355 !important;
    }
    
    .half-width {
        width: 50%;
        float:left;
    }
    
    .quarter-width {
        width: calc(25% - 30px);
        float:left;
        padding:15px;
    }
    
    #social2 {
        display: block;
        background-color: transparent;
        float: left;
        margin: 0 auto;
    }
    
    .sc-icn2 {
        width: 50px;
        height: 50px;
        display: block;
        margin-right: 5px;
        margin-bottom: 5px;
        float: left;
    }
    @media only screen and (max-width: 768px) {
     .container{
        max-width: 80%;
        margin:20px auto 40px auto;
        min-height:480px;
      }
    }

    <html>
        <head>        
        </head>
         <body>
            <div id="mainPart"></div>
            <div class="container">
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
            </div>        
            <footer>
            <div class="footrow" >
                <div class="foot">
                    <div class="quarter-width">        
                        <div>        
                        </div>
                    </div>
                    <div class="quarter-width">       
                    </div>
                    <div class="quarter-width">        
                        <div id="social2">        
                        </div>
                    </div>
                    <div class="quarter-width">        
                    </div>
                </div>
            </div>
            <div class="footrow2">
                <div class="foot">
                    <div class="half-width">
                    </div>
                    <div class="half-width">
                    </div>
                </div>
            </div>
        </footer>        
        </body>        
    </html>

Upvotes: 0

Ahmed Salama

Reputation: 2825

You can do this by many ways:

There is negative bottom margins on wrappers

There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}
.footer,
.push {
  height: 50px;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

<div class="content">
  
  <h1>Sticky Footer with Negative Margin 1</h1>
</div>

<footer class="footer">
  Footer 
</footer>

Negative top margins on footers

This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background: red;
}

<div class="content">
  <div class="content-inside">
    content
  </div>
</div>
<footer class="footer"></footer>

There is calc() reduced height wrappers

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.content {
  min-height: calc(100vh - 70px);
  padding: 40px 40px 0 40px;
}
.footer {
  height: 50px;
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

<div class="content">
  <h1>Sticky Footer with calc()</h1>
</div>

<footer class="footer">
  Footer 
</footer>

And also you can use flexbox

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1 0 auto;
  padding: 20px;
}
.footer {
  flex-shrink: 0; 
  padding: 20px;
  background: #42A5F5;
  color: white;
}

<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
</div>

<footer class="footer">
  Footer 
</footer>

Upvotes: 0

Ram Chandra Neupane

Reputation: 1891

To achieve that result define the footer position to bottom. position: absolute; bottom: 0;

The position property specifies the type of positioning method used for an element. The absolute element is positioned relative to its first positioned ancestor element which is the body As you can see in body css rule the element is positioned relative to its normal position.

More about position property can be found here.

html {
 position: relative;
 min-height: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
}

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

body {
  overflow-x: hidden;
  margin: 0px;
  position: relative;
  min-height: 100%;
  height: auto;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #34495e;
  color:#fff;
  text-align: center;
}

<div class="demo">
  <h1>Footer Stays Bottom</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>


</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Upvotes: 1

DragosHan

Reputation: 37

To make the footer stay at bottom of the page, you simply have to add position: absolute; and bottom: 0; in the block of CSS that applies to footer. So it will become:

footer{
 color: white;
 width:100%;
 padding:0;
 display:block;
 clear:both;
 height: 40px; /* added */

 position: absolute;
 bottom: 0;
}

Upvotes: 1

Making a footer stay at the bottom of the page both in mobile view and desktop view

Answers (4)

Related Questions