问答博客资讯标签用户活动
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

请教一个web布局问题？

头像
粒莉梨
    35252033

    描述一下，对于页面，

    内容少得不足以产生滚动条的时候，footer落在最底部面，
当内容变多，页面产生滚动条时，footer要处于内容的最后，即滚动到最底部才能看见

    我知道一种是使用 负值margin-top 和 正值padding-bottom 的方法，但是感觉不够灵活..

    请问有没有什么好的实现方法？
    图片描述

    这是我答案：
    纯css
    因为我主要用在移动端 应该可以兼容吧....
    https://jsfiddle.net/BoomBang...

    javascripthtmlcss
    阅读 2k
    3 个回答
    得票最新
    头像
    jsoncode
      4k115990

      这种东西就在于思路：

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title></title>
</head>

<body>
    <style>
    body{
        margin: 0;
    }
    html,
    body,
    .wrap {
        height: 100%;
    }
    
    .content {
        min-height: 100%;
    }
    
    footer {
        height:50px;
        background-color: #0cc;
        margin-top: -50px;
    }
    </style>
    <div class="wrap">
        <div class="content">
            <div>内容区域</div>
        </div>
        <footer>
            底部
        </footer>
    </div>
</body>

</html>

      效果图：
      图片描述
      图片描述

      头像
      hyule
        1.3k1416

        不考虑兼容老的IE：
        flex 布局 + wrapper最小高度为视口/窗口高度。

        要兼容老的IE：

        1. 上Javascript；

        2. 固定尺寸的CSS trick。

        头像
        djyuning
          1.5k1419

          为内容区域设置 min-height 属性，让其有一个最小高度，其值可以是固定的（如：1280px），亦可以通过 js 来动态设置（如：$('.content').css('min-height', window.innerHeight)），这样，内容较少时，内容区域会撑满整个窗口，而 footer 结构会出现在屏幕以外（下，滚动可见）；

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题