请教一个web布局问题？

描述一下，对于页面，

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

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

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

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

javascript html css

阅读 1.9k

3 个回答

jsoncode

这种东西就在于思路：

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

发布于
2017-05-18

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

要兼容老的IE：

上Javascript；
固定尺寸的CSS trick。

djyuning

1.5k1419

发布于
2017-05-18

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

请教一个web布局问题？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？