前端高度自适应
情景
其实前端一般不去管高度，都是设置min-height，用来设置最小高度，其他时候就用里层的div来撑开就好了。但是当屏幕很大的时候，比如笔记本和台式显示屏的问题，在内容比较小的时候那么就撑不开了。我这个项目今天就遇到了，其实下面两个思路，我都写了一遍，但问题是需求喜欢第二种，效果是调出来了，svn库里的暂时先不改，过几天再说吧。
这个时候就需要获取屏幕大小也就是浏览器的大小，这里有两个思路，一个是使用**@screen来写两种样式，**在不同屏幕下有不同的样式。
另外还有一种就是，通过html height100%来传给body height 100% 获取屏幕窗口的大小，然后再将这个body的高度传给内部的a层div（他的内有有b层div div1和div2），这个a层div min-height 100% 就可以实现这层div大小占满全屏，如果需要有padding或者其他的占位比如同级的div，那么在min-height可以使用less来减去对应的高度，比如减去50px。（写法 min-height: calc(~"(100% - 50px)");注意这里的运算符-的前后都要有空格不然不生效。）然后a层div里面的其他div就使用height： 100%来取相对浏览器窗口的大小了，比如b层div是个竖向导航栏，那么height：100%就是他上一级父元素的大小，窗口减了50px的高度了。下面的代码是1和2 3的div占满adiv （占满的话需要3的height 40%，不设置高度，小于时不会占满，大于时会撑开adiv） adiv和headdiv占满窗口大小。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 50px;">head</div>
<div style="min-height: calc(~"(100% - 50px)");" >a
<div style="height: 50%;">1</div>
<div style="height: 10%;">2</div>
<div>3</div>
</div>
</body>
<html>
调试的时候注意这个层次要好好查查，如果有变化，跟预期不一样看看中间哪一级的div的大小传变了就能定位问题。
注意你不能全写min-height，min-height必须要求父元素有height，如果父元素是min-height的话，那么他的子元素的min-height将不会生效。所以我们是在a层的div上设置min-height，如果内容多，比如你给div3不写高度，那么他就是可以往外撑，他撑高了也会把diva给撑高，因为diva是min-height，就不会出现大于窗口情况的显示问题。
百分比不生效原理
当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时或设置的高度值百分比不生效时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。 换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，浏览器不会对这个值有任何的反应。
2175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
