Question

我已经搜索了这个论坛，但是没有一种解决方案适合我。标题提到我的页脚并没有停留在底部。

代码如下：

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        box-sizing: border-box;
      }

      .menu {
        float: left;
        width: 20%;
      }

      .menuitem {
        padding: 8px;
        margin-top: 7px;
        border-bottom: 1px solid #f1f1f1;
      }

      .main {
        float: left;
        width: 60%;
        padding: 0 20px;
        overflow: hidden;
      }

      .right {
        background-color: lightblue;
        float: left;
        width: 20%;
        padding: 10px 15px;
        margin-top: 7px;
      }

      @media only screen and (max-width:800px) {
        /* For tablets: */
        .main {
          width: 80%;
          padding: 0;
        }
        .right {
          width: 100%;
        }
      }

      @media only screen and (max-width:500px) {
        /* For mobile phones: */
        .menu,
        .main,
        .right {
          width: 100%;
        }
      }

    </style>
  </head>

  <body style="font-family:Verdana;">

    <div style="background-color:#f1f1f1;padding:15px;">
      <h1>Cinque Terre</h1>
      <h3>Resize the browser window</h3>
    </div>

    <div style="overflow:auto">
      <div class="menu">
        <div class="menuitem">The Walk</div>
        <div class="menuitem">Transport</div>
        <div class="menuitem">History</div>
        <div class="menuitem">Gallery</div>
      </div>

      <div class="main">
        <h2>The Walk</h2>
        <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
        <img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
      </div>

      <div class="right">
        <h2>What?</h2>
        <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
        <h2>Where?</h2>
        <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
        <h2>Price?</h2>
        <p>The Walk is free!</p>
      </div>
    </div>


    <div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

  </body>

</html>

它确实可以在移动设备上使用，但不能在普通显示器上使用。

这是演示页面：http://jsfiddle.net/Lwp710be/2/show

这是jsfiddle代码：http://jsfiddle.net/Lwp710be/2/

Answer 1

因为页脚和主要内容区域是页面的主要部分，所以更好的解决方案是使用CSS Grid。

下面是一个演示，其中我在名称为function Car(model, seat_capacity) { Car.increase = 0; return { model: model, get seat_capacity() { return seat_capacity + Car.increase; }, print: function() { return "Model =" + this.model + ", Seat Capacity =" + this.seat_capacity }, } } let a = new Car("Ford Mustang", 4); let b = new Car("Porsche 911", 2); console.log(a.print(), b.print()); // 4, 2 Car.increase = 10; console.log(a.print(), b.print()); // 14, 12的类上创建了一个网格上下文，并将其应用于标记中的select * from <table-name> where (name like '%$searchq%' or suburb like '%$searchq%' or town like '%$searchq%' or keyword like '%$searchq%' ) and active = 0;元素，然后将主要内容包装在{{ 1}}元素，因此.container元素现在有两个孩子body和main（div元素是您的页脚），它们都遵循网格规则：

body

main

Answer 2

我用flexbox解决了。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">

  <div class="content">
    <div style="background-color:#f1f1f1;padding:15px;">
      <h1>Cinque Terre</h1>
      <h3>Resize the browser window</h3>
    </div>

    <div style="overflow:auto">
      <div class="menu">
        <div class="menuitem">The Walk</div>
        <div class="menuitem">Transport</div>
        <div class="menuitem">History</div>
        <div class="menuitem">Gallery</div>
      </div>

      <div class="main">
        <h2>The Walk</h2>
        <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
        <img src="img_5terre.jpg" style="width:100%">
      </div>

      <div class="right">
        <h2>What?</h2>
        <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
        <h2>Where?</h2>
        <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
        <h2>Price?</h2>
        <p>The Walk is free!</p>
      </div>
    </div>
  </div>

  <footer class="footer">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</footer>

</body>
</html>

响应脚注不停留在页面底部

2 个答案: