-2

I am using Wordpress sparkling theme from Colorlib. Demo of this theme is here: https://colorlib.com/sparkling/ If you will delete part of content you will reproduce this issue - the footer will go up.

What i see is situation that there is space after footer: enter image description here

I read about my problem here: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

But:

1) I do not want to see this footer always. I want it to be at bottom.

2) I want it to be full responsive - size is dynamic (RWD) i am not sure what is the size of the footer.

What i tried:

#footer-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
    z-index: 100;
}

It's kinda ok - but i do not want to see the footer always. It should not cover anything behind it.

tryingHard
  • 1,794
  • 4
  • 35
  • 74

3 Answers3

1

Hope this CSS help you.

Please try below CSS.

  html,body,#page{
    min-height: 100vh;
   }

  #page{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
  flex-direction: column;
}

#content{
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
}

enter image description here

Prakash Rajotiya
  • 1,013
  • 5
  • 11
0

use flexbox. and give flex-grow property to the main content.

body {
    height: 100%;
    width:100%;
    position: absolute;
    margin: 0;
    display: flex;
    flex-direction : column;
}
header {
  background: tomato;
}
div {
  flex: 1; /* or flex-grow: 1  */;
  overflow-x: auto;
  background: gold;
}
footer {
  background: lightgreen;
  padding: 10px 0px;
}
@media only screen and (max-width: 600px) { 
  div {
    flex:none;
  }
}
<header>
    header: sized to content
    <br>(but is it really?)
</header>
<div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
</div>
<footer>
    footer: content
</footer>
Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
  • The example you provided is not good cause it hides content on smaller devices and it shows footer always: https://imgur.com/a/puKRE3l – tryingHard Sep 05 '19 at 08:01
  • you can use a media query to achieve it. `@media only screen and (max-width: 600px) { /* style */ }` – Deepu Reghunath Sep 05 '19 at 09:08
  • Not sure what you mean if you could please update your answer and example. – tryingHard Sep 05 '19 at 09:16
  • It still does not work as it supposed to, see: https://imgur.com/a/WUEvoD2 Footer is hiding content. As i mentioned in the question - this is dynamic matter (RWD) and you are using fixed size here. See the accepted answer - it works fine. – tryingHard Sep 05 '19 at 14:52
  • No, it does not - try it yourself. – tryingHard Sep 05 '19 at 22:27
0

you can use position: absolute;

header{
  background-color:red;
}
footer{
  background-color:green;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
}
<header>Header</header>
<footer>footer</footer>
Munni
  • 731
  • 5
  • 20