Footer covers my content when using w3.css

Question

I am trying out w3.css for styling, along with knockout, and when I use a footer, it covers the content near the bottom of the page.

I have a button at the bottom of my content. When the page resizes or is small enough, the footer covers the button.

See codepen, or the code below

 function setting(color) {
   this.color = ko.observable(color);
   this.colorClassName = ko.computed(function() {
     return "w3-hover-" + this.color();
   }, this);
 }

 function myInput() {
   this.data = ko.observable("");
   this.nameValid = ko.computed(function() {
     return !(this.data() == null || this.data().length == 0);
   }, this);
   this.error = ko.computed(function() {
     //if (this.data() == null || this.data().length == 0)
     if (this.nameValid() == false) {
       return "Enter name";
     } else {
       return "";
     }
   }, this);

   this.display = ko.computed(function() {
     if (this.nameValid() == false) {
       return "block";
     } else {
       return "none";
     }
   }, this);

   this.ageData = ko.observable();
   this.ageValid = ko.computed(function() {
     var age = this.ageData() + "";

     var patt = new RegExp(/^[0-9]+$/g); /// ^-from start, $-to end, [0-9] - 0 to 9 numbers only
     var res = patt.test(age);
     if (isNaN(age) == true || res == false) {
       return false;
     } else {
       return true;
     }
   }, this);
   this.ageError = ko.computed(function() {
     if (this.ageValid() == false) {
       return "Enter a valid age";
     } else {
       return "";
     }

   }, this);
   this.ageDisplay = ko.computed(function() {
     if (this.ageValid() == true) {
       return "none";
     } else {
       return "block";
     }
   }, this);

   this.phone = ko.observable('http://digitalbush.com/projects/masked-input-plugin/');

   this.allValid = ko.computed(function() {
     return this.ageValid() && this.nameValid();
   }, this);
 }

 function myModel() {
   this.name = "Ice-Cream";
   this.items = [{
     name: "Chocolate",
     price: 10
   }, {
     name: "Vanilla",
     price: 12
   }];
   this.style = new setting('pale-green');
   this.input = new myInput();

   this.changeColor = function() {
     if (this.style.color().indexOf('blue') == -1) {
       this.style.color('pale-blue');
     } else {
       this.style.color('pale-green');
     }
   };
 }
 ko.applyBindings(new myModel());

<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" type="text/css">

<body class="w3-content w3-pale-blue" style="max-width:100%">
  <header class="w3-container w3-pale-green w3-border">
    <h1>Hello</h1>
  </header>
  <div class="w3-container w3-pale-yellow w3-border w3-padding-hor-16 w3-content" style="max-width:100%">
    <a href="http://www.w3schools.com/w3css">W3.CSS</a>
    <p>
      The item is <span data-bind="text: name"></span> today.
      <br />Available flavours are:
    </p>
    <div class="w3-container">
      <ul data-bind="foreach: items" class="w3-ul w3-left w3-border w3-border-red">
        <li class="w3-ul w3-hoverable w3-border-red " data-bind="css: $parent.style.colorClassName()">
          <span data-bind="text: name"></span> is $<span data-bind="text:price" />
        </li>
      </ul>
    </div>

    <label class="w3-label w3-text-blue w3-xlarge">Name</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.data">
    <label class="w3-label w3-text-red w3-large" data-bind="text: input.error(), style: { display: input.display()}"></label>
    <br />
    <label class="w3-label w3-text-blue w3-xlarge">Age</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.ageData">
    <label class="w3-label w3-text-red w3-large" data-bind="text: input.ageError(), style: { display: input.ageDisplay()}"></label>
    <br />
    <label class="w3-label w3-text-blue w3-xlarge">Phone</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.phone">
    <!--<label class="w3-label w3-text-red w3-large" data-bind="text: input.phoneError(), style: { display: input.phoneDisplay()}"></label>-->
    <br />
    <button class="w3-btn w3-border w3-border-teal w3-round w3-teal" data-bind="click: changeColor, enable: input.allValid()">Test</button>
  </div>

  <footer class="w3-light-grey w3-bottom">
    <div class="w3-container">
      <p>This is my footer</p>
    </div>
  </footer>

I think the solution will lie in telling the other container elements to not go over the footer but scroll instead. I may have to use some kind of row layout. — Quintonn, May 10 '16 at 09:47

score 1 · Accepted Answer · answered May 30 '16 at 08:38

1

My solution was to add another div element with the same content as my footer, but make it invisible. This way it will fill the space behind the real footer.

In the code i above i will add the following

<div class="w3-container" style="opacity:0">
  <p>This is my footer</p>
</div>

The updated codepen shows the solution.

answered May 30 '16 at 08:38

Quintonn

770
8
29

Nailed it for me. – Toby Wilson Sep 10 '16 at 13:55

score 0 · Answer 2 · answered May 04 '16 at 13:10

0

The elements .w3-top, .w3-bottom have a position of :fixed, so they're always going to stick to the page.

Remove this from their stylesheet or add an alternative to your own.

E.g.

.w3-bottom {
position: static;
}

answered May 04 '16 at 13:10

Gavin Thomas

1,196
6
10

This makes my footer not go to the bottom of the page, but instead just sits as the last item on the page. In my code, it's the same as not specifying w3-bottom. – Quintonn May 10 '16 at 09:37

score 0 · Answer 3 · answered May 04 '16 at 13:14

0

The class of your footer is w3-bottom, and by defaut, its position is fixed, so you need to change it to relative:

.w3-bottom {
    position: relative !important;        
}

answered May 04 '16 at 13:14

Tu DUONG

94
3

This makes my footer not go to the bottom of the page, but instead just sits as the last item on the page. In my code, it's the same as not specifying w3-bottom. – Quintonn May 10 '16 at 09:37

score 0 · Answer 4 · answered May 28 '16 at 19:52

Another way could be to place the "button" in its own "div" to better control its attributes, remove the "div" from the footer and the bottom class. Something like:

  <div class="w3-container w3-padding-bottom-32">
    <button class="w3-btn w3-border w3-border-teal w3-round w3-teal" data-bind="click: changeColor, enable: input.allValid()">Test</button>
  </div>

  <footer class="w3-container w3-light-grey">
      <p>This is my footer</p>
  </footer>

Please let me know if it works for you.

Kindly, Edwin

score 0 · Answer 5 · answered Nov 08 '16 at 12:27

Try to use the styles from Sticky footer example from the bootstrap. But this method have one disadvantage: footer have fixed height :(

Example:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 80px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  /* Set the fixed height of the footer here */
  height: 80px;
  background-color: #f5f5f5;
}

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>

<div class="w3-container">
  <p>The w3-container class can be used to display headers.</p>
</div>

<div class="footer w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</div>

</body>
</html>

Footer covers my content when using w3.css

5 Answers5