CODEWITHSUNDEEP
javascripthtmlcss
blue
blue

Reputation: 7375

CSS- stick footer to bottom of page (so only visible after scroll) WITHOUT html selector?

Alright, Im having CSS problems here. My original question was CSS/html - make footer ONLY visible after scroll? stick to bottom just below visible page area? and I achieved the effect I wanted on ONE page with this html:

<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>

And CSS:

* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  min-height: calc(100% + 142px);
  margin-bottom: -142px;
}

.wrapper:after {
  display: block;
  content: "";
  height: 142px;
}

.footer {
  background-color: white;
  opacity: 0.5;
  height: 142px;
  text-align: center;
}

The problem is that the following:

* {
      margin: 0;
    }

    html, body {
      height: 100%;
    }

which allows this to work has screwed up (really screwed up) every other page on my site and furthermore, doesnt have the same effect on the footer on these pages. Im looking for a simpler method of sticking the footer to the absolute bottom (just past the page content) JUST using the class selectors, i.e. no html, body, or *.

Ive tried putting height: 100%andmargin: 0 just in the wrapper and footer since these apply to all, but my footer either remains stuck to top of page or not visible at all.

Here is the CSS Im working with at the moment:

.wrapper:after {

 height: 100%;
  height: 89px;
}

.wrapper {
     margin-bottom: -89px;
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: calc(100% + 89px);
    margin-top: 0px;

    z-index: -1;
    text-align: center;
}
.footer{

    position: absolute;
    bottom: 0px;
height: 89px;
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 0.8;
    text-align: center;
    z-index: -3;
    color: white;
}

Is there any way to accomplish this? Again, I don't want a fixed footer, I want it to just regardless of amount of content on page stay stuck just BELOW content. Im desperate here - have a broken site at the moment

Upvotes: 0

Views: 436

Answers (3)

Asons
Asons

Reputation: 87191

Will this work for you ?

This is fully dynamic solution where the wrapper takes the remaining space left by the footer.

html, body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  flex: 1;
  padding: 10px;
}
.footer {
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}
<div class="container">
  <div class="wrapper">
    <h1 class="headertext">Welcome back.</h1>
  </div>
  <div class="footer">Footer</div>
</div>

If you by no means can use html, body { margin: 0; }, another option is using absolute positioning.

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  flex: 1;
  padding: 10px;
}
.footer {
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}
<div class="container">
  <div class="wrapper">
    <h1 class="headertext">Welcome back.</h1>
  </div>
  <div class="footer">Footer</div>
</div>

If you can't use flex, use display: table, it has the same dynamic feature for a sticky footer though you need an extra wrapper as a row

html,
body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: table;
  width: 100%;
}
.row {
  display: table-row;
  height: 100%;
}
.row ~ .row {
  height: 1px;
}
.wrapper {
  display: table-cell;
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  padding: 10px;
}
.footer {
  display: table-cell;
  background-color: white;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
}
<div class="container">
  <div class="row">
    <div class="wrapper">
      <h1 class="headertext">Welcome back.</h1>
    </div>
  </div>
  <div class="row">
    <div class="footer">Footer</div>
  </div>
</div>

Upvotes: 1

Konrud
Konrud

Reputation: 1114

You can try to use flexbox trick here. JSFiddle

CSS:

BODY {
    display: flex;
    display: flexbox;
    height: 100vh;
   -ms-flex-direction: column;
   flex-direction: column;
}

.wrapper {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

If you don't wanna use Body selector you can add min-height: 100vh; to you .wrapper that will define its min-height as 100% of the viewport.

.wrapper {
    min-height: 100vh;
}

Works fine for me even in IE10.

HTH.

Upvotes: 0

Quack
Quack

Reputation: 361

This would be my approach: https://jsfiddle.net/Ltj0o802/

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus.</p>").insertAfter("#add");
});
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  min-height: 100%;
  background: gray;
}
.headertext {
  margin-top: 0;
}
.content {
  padding-bottom: 50px;
}
.footer {
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="content">
    <h1 class="headertext">Welcome back.</h1>
    <p>
      <button id="add">Add Content</button>
    </p>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

Upvotes: 0

Related Questions