页面的body如何设置margin-bottom ?
<!DOCTYPE HTML>
<html >
<head>
<title> </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
*{margin:0;padding:0}
html{
height:100%;;
overflow:hidden;
background:#fefefe;
}
body{
height:inherit;
overflow:hidden;
margin-top:10px;
margin-bottom:100px;
padding-bottom:100px;
margin-left:100px;
background:#fefefe;
}
#box{
margin-left:100px;
height:inherit;
width:600px;
background:gold;
overflow:auto;
}
.footer {
position: fixed;
right: 0;
width:500px;
height:100px;
z-index: 1030;
bottom: 0;
margin-bottom: 0;
background:orange;
}
</style>
<script type="text/javascript">
function talk(){
document.getElementById("box").innerHTML+="<h1>"+document.getElementById("msg").value+"</h1>";
}
window.onload=function(){
//document.getElementById('box').scrollTop=1000;
}
</script>
</head>
<body>
<div id='box'>
balablabl ...
</div>
<div class='footer'>
<input id='msg' type="" vavlue=' '>
<button onclick='talk()' > Enter </button>
</div>
</body>
</html>
body 无法怎么设置margin-bottom 不管是padding-bottom还是margin-bottom都不起作用
body的height是根据屏幕高度自适应的
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
这是body 的样式吗？
回复
不要咬着body不放，那个是原生盒子，相当于房子的基石，我们应该在基石上建房子。
回复
position:absoult; padding-bottom:100%; 放哪都没用
回复
.fullscreen{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
回复
这跟padding-bottom无关 footer已经定位了，要的是中间主体部分的padding-bottom
padding-bottom 也无效
用 padding-bottom 代替
在外面套一层div吧，别控制body了。