您的位置：首页 > 其它

哈哈，苦思冥想，解决一个适应屏幕高度自伸缩的问题。（一）

2014-11-20 13:50 169 查看


在开发移动端布局的时候，遇到一个问题。
body高度为屏幕的100%，中间的高度如何不适用JS计算，自动的撑开呢？
觉得判断页面高度？好像什么框架见到过。但是本人JS水平有限，计算又过于复杂，决定另辟跷径。

经过我的巧妙构想，最终完美解决了问题（有局限性）
1.试了弹性盒（display:box）。但是垂直的好像不行，因为有时候内容不够。
2.想到最好是挤压页面。

一开始想到了padding-box。用的padding和padding-box。然后火狐浏览器能正常显示。谷歌不能正常显示，陷入僵局。
3.经过自己的苦思冥想，然后事情又变得峰回路转。
突然想到了border-box向内挤压，改成了border配合box-sizing:border-box向内挤压的方法。

总结：
我们公司只做高版本android，不支持box-sizing:border-box的同学就悲催了。
可能别的网站还有这种内容不够时，高度自伸缩的例子，欢迎大家参与讨论补充。
思维有些混乱，语言组织有些混乱，大家凑合的看吧。

附：代码如下，可自行查看（不好意思，代码贴错了，重贴）。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
height: 100%;
}
</style>
<style>
body{
margin: 0;
/*box-sizing: padding-box;*/
}
#top{
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100px;
background: #33AAAA;
}
#bottom{
position: absolute;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 100px;
background: #33AAAA;
}
#center_out_container{
border-width: 100px 0;
border-color: rgba(0,0,0,1);
border-style: solid;
height: 100%;
box-sizing: border-box;
background: #33AAAA;
}
#center{
text-align: center;
height: 100%;
background: #bfe3cc;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="center_out_container">
<div id="center">
center
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
hello
</div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航