问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

pc端改移动端布局问题

头像
凡人
    5911529

    在将pc端改移动端时遇到了一个问题，头部固定，中间内容动态加载，但在最后的页面的底部都会加上版权信息，但当中间内容不够时，底部内容还是要在app的最下面，不要固定定位，最好使用css来完成，一时没想到怎么处理，求给个思路或者相关的文章之类的

    clipboard.png

    javascriptcss
    阅读 2.3k
    3 个回答
    得票最新
    头像
    桃子_Lisa
      1.1k119
      ✓ 已被采纳

      中间内容的min-height设置成calc(100vh - 版权部分的高度) 就可以了。因为头部估计是fixed的，所以不用减

      以下是代码

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
  <style>
    body{
      margin: auto;
    }
    .header{
      position: fixed;
      top: 0;
      width: 100%;
      height: 20px;
      background-color: pink;
    }

    .copyright{
      height: 20px;
      padding-bottom: 15px;  
    }

    .content{
      box-sizing: border-box;
      padding-top: 25px;
      min-height: calc(100vh - 35px); /* 35是copyright的高度*/
      /*height: 1000px;*/  
    }
  </style>
</head>

<body>
  <div class="header">我是固定的头部</div>
  <div class="content">
    我是内容内容
  </div>
  <div class="copyright">我是版权信息哦</div>
</body>

</html>
      头像
      小学生
        4951

        获取头部和底部的高度。给中间内容设置min-height。

        头像
        leonleung
          2.9k1922

          既然头部和底部的高度不变，那就设置中间动态加载位置的最小高度：

          min-height: calc(100vh - 头部高度 - 底部高度)
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题