页面的body如何设置margin-bottom ?

yak 发布于 2016/05/19 16:26
阅读 521
收藏 0
<!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是根据屏幕高度自适应的

加载中
0
VmLia
VmLia
在外面套一层div吧,别控制body了。
0
公孙二狗
公孙二狗
用 padding-bottom 代替
yak
yak
padding-bottom 也无效
0
梦想岛
梦想岛
position:absoult;
padding-bottom:100%;

yak
yak
回复 @梦想岛 : 这跟padding-bottom无关 footer已经定位了,要的是中间主体部分的padding-bottom
梦想岛
梦想岛
回复 @yak : .fullscreen{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
yak
yak
回复 @梦想岛 : position:absoult; padding-bottom:100%; 放哪都没用
梦想岛
梦想岛
回复 @yak : 不要咬着body不放,那个是原生盒子,相当于房子的基石,我们应该在基石上建房子。
yak
yak
这是body 的样式吗?
返回顶部
顶部