开发者社区> 问答> 正文

给html,body设置min-height 没有作用?

当网页内容区content东西很少时,footer就会跑到上边来?
我给body,html设min-height:100%;没有作用,
设置height:100%;就好了,但是内容多了就在一屏下?

body,html{
   min-height:100%;
}
body{
   position:relative;
}

.content{
  podding-bottom:100px;
}

.footer{
position:absolute;
bottom:0;
left:0;
height:100px;
}

展开
收起
杨冬芳 2016-06-03 18:44:26 2353 0
1 条回答
写回答
取消 提交回答
  • IT从业

    这样写:

    html {
        height: 100%;
    }
    
    body {
        position: relative;
        min-height: 100%;
        box-sizing: border-box;
        padding-bottom: 80px; /* .footer 的高度,为 footer 占位 */
    }
    
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
    }

    上面的代码兼容到 IE8 及以上

    2019-07-17 19:27:04
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载