不同浏览器不用尺寸屏幕呈现出的窗口大小不同，如何去适配网页更好的一屏显示，介绍两种常见情况：
1、左右布局或者上下布局
左右布局和上下布局是常规的两种布局方式，设置一屏显示也是非常简单的，主要是设置高度的百分比，样式如下：
html,body{ margin: 0; padding: 0; height:100%; }
左右布局时，左右部分分别设置height：100%；上下布局时，设置上下部分高度和为100%即可。
注：html是文档根元素，一屏显示时，必须设置html的height为100%，如果只设置body元素的高度为100%时，body内部元素设置100%不起效。
2、上中下（上下固定px/em/rem）
上中下结构容易出现在后台，这种情况要一屏显示，相对于左右或者上下要复杂，复杂主要是出现在上下要固定宽度，而不是设置百分比，因此在不同浏览器窗口和不同屏幕尺寸情况下中间部分高度很难控制，当然有人可能会使用js去获取当前浏览器可视化窗口去计算中间的高度，这种方法太费力，还是用css方法解决吧。
上下固定高度，中间自适应，其实是定位的一种很神奇的用法。我们习惯的定位是水平一个参数left / right，垂直一个参数 top / bottom，基本没用过top和bottom一起用的情况，但是一起用的效果确实很神奇。
解决方案：设置中间的元素top为上部元素的height值，设置bottom为下部height值，不要设置中间元素的高度，设置上下定位的目的就是让其自适应高度。
注：设置宽度为100%，否则会发现宽度只是其内容宽度。或者你也可以尝试设置left：0；right：0；会自动拉伸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Title</title>
</head>
<style>
html,body{
margin: 0;
padding:0;
height:100%;
}
.container{
width: 100%;
height:100%;
position: relative;
}
.top{
height:100px;
background: #ff0;
}
.middle{
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
background: #f0f;
}
.bottom{
position: absolute;
bottom: 0;
height:100px;
width: 100%;
background: #0ff;
}
</style>
<body>
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>
效果如下图：
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
