个人中心
gpt4 book ai didi

html - 响应式页脚不停留在页面底部

转载 作者：太空宇宙 更新时间：2023-11-04 06:54:28 24 4
gpt4 key购买 nike

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

代码如下:

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

最佳答案

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

下面是一个演示，我在一个名为 .container 的类上创建了一个网格上下文，并将其应用于标记中的 body 元素，然后我包装了main 元素中的主要内容，因此 body 元素现在有 2 个子元素 main 和 div(div 元素是你的页脚)都遵循网格规则:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.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%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

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

  <!-- MAIN CONTENT STARTS HERE -->
  <main>
    <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>
  </main>
  <!-- MAIN CONTENT ENDS HERE -->

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

关于html - 响应式页脚不停留在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52576560/

24 4 0
文章推荐： javascript - Bootstrap 防止下拉菜单在光标移动时消失
文章推荐： 从 pthread 内部调用函数？
文章推荐： c - 这段 C 代码的作用是什么？ [与函数体代码混淆]
文章推荐： javascript - 网页右侧和底部的空白
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com