使用 w3.css 时页脚会覆盖我的内容

Question

我正在尝试 w3.css 样式和剔除，当我使用页脚时，它会覆盖页面底部附近的内容。

我的内容底部有一个按钮。当页面调整大小或足够小时，页脚会覆盖按钮。

参见codepen，或下面的代码

 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>

Answer 1

元素 .w3-top, .w3-bottom 的位置为 :fixed，因此它们总是会粘在页面上。

从他们的样式表中删除它或添加一个替代您自己的样式表。

例如

.w3-bottom {
position: static;
}

Answer 2

你脚的class是w3-bottom，默认位置是固定的，需要改成相对的：

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

Answer 3

另一种方法是将 "button" 放在它自己的 "div" 中以更好地控制其属性，从页脚和底部 class 中删除 "div"。类似于：

  <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>

请告诉我它是否适合你。

您好，埃德温

Answer 4

我的解决方案是添加另一个 div 元素，其内容与我的页脚相同，但使其不可见。这样它将填充真正页脚后面的space。

在上面的代码中，我将添加以下内容

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

更新后的 codepen 显示了解决方案。

Answer 5

尝试使用 Sticky footer example from the bootstrap 中的样式。但是这种方法有一个缺点：页脚有固定的高度:(

示例：

/* 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>

使用 w3.css 时页脚会覆盖我的内容

Footer covers my content when using w3.css

html

css

footer

styling

w3.css