返回信息流昨天乐视面试
一面出了个题目：当页面内容不能铺满全屏的时候，低栏固定在屏幕最下方，当内容超出全屏，出现滚动条时，低栏在内容的最下方
不知道我有没有表达清楚。。当时面试官给的方法是 给body设置padding-bottom：和低栏一样高，然后将低栏固定在body的padding-bottom中
但是今天怎么试都不行。。。body设置height：100%；也不行。。。。求大神告应该怎么做？感觉这道题还是很有实用价值的 想弄明白。。百度出来的方法我试了几个 并不可行。。。
这是一条镜像帖。来源：北邮人论坛 / java-script / #535同步于 2016/10/10
该镜像源已超过 30 天没有更新，可能在源站已被删除。
JavaScript机器人发帖
一道前端面试题
yiyi1314
2016/10/10镜像同步22 回复
订阅后，新回复会通过你的通知中心匿名送达。
9 条回复
是这种效果吗，把注释取消掉可以看有滚动条的效果
```JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
background-color: #ccc;
}
.content {
height: 200px;
/*height: 2000px;*/
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: orange;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="content">
</div>
<div class="footer">
footer
</div>
</body>
</html>
```
【 在 yiyi1314 的大作中提到: 】
: 昨天乐视面试
: 一面出了个题目：当页面内容不能铺满全屏的时候，低栏固定在屏幕最下方，当内容超出全屏，出现滚动条时，低栏在内容的最下方
: 不知道我有没有表达清楚。。当时面试官给的方法是 给body设置padding-bottom：和低栏一样高，然后将低栏固定在body的padding-bottom中
: ...................
html 高度100% body min-height 100% relative让footer相对body定位就行 代码的话 https://github.com/Luobata/layout/blob/master/layout1.html (byr论坛怎么贴代码啊)
外层设置成 display:flex，然后内容的元素设置成 flex: 1,这个中间就会自动填充了，footer 元素就会按照你的想法贴着底栏或者被内容顶到最下方
参考我的博客的 footer 位置吧 http://jiangjiu.leanapp.cn/
点一下关于标签，看看和主页时 footer 的区别
小伙子可以，和我的想法一样。用md就可以贴代码了
【 在 yaochenghao 的大作中提到: 】
: html 高度100% body min-height 100% relative让footer相对body定位就行 代码的话 https://github.com/Luobata/layout/blob/master/layout1.html (byr论坛怎么贴代码啊)
楼上给出了两种方法，我也来给出一种用margin-bottom解决的办法。兼容性我觉得是最高的吧。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,html{
height: 100%;
margin: 0;
}
.content{
width: 100%;
min-height: 100%;
/*height: 2000px;*/
margin-bottom: -40px;
}
footer{
height: 40px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="content">content</div>
<footer>
footer
</footer>
</body>
</html>
```
关键点在于将content的最小高度设为100%并且将其的margin-bottom的值和footer的高度值设为相反数，这样footer能够自动补齐在content之后，不管是有无滚动条。
嗯嗯 就是这样子的~~ 原来是要设置 min-height 啊
谢谢~~~~~
【 在 LeeSir 的大作中提到: 】
: 是这种效果吗，把注释取消掉可以看有滚动条的效果
: [md]
: ```JavaScript
: ...................
谢谢~~[ema4]
【 在 PiEgg 的大作中提到: 】
: 楼上给出了两种方法，我也来给出一种用margin-bottom解决的办法。兼容性我觉得是最高的吧。
: [md]
: ```html
: ...................