服务购

　　在建设手机网站时，都会出现这样的问题：手机网站高度怎么改变？别担心，让小编来教你。

　方案一：响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示@media only screen and (min-width: 100px) and (max-width: 640px) {div{

　　width: 100px;

　　height: 100px;

　　@media only screen and (min-width: 641px) and (max-width: 789px) {div{

　　width: 200px;

　　height: 200px;

　　方案二：百分比来做,这里需要运用一个小技巧,padding用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,设置个padding-bottomheight:0;

　　width:50%;

　　padding-bottom:30%

　　那么这个div的高宽比就是30%:50%

　　这个div的参数设置是由哪个100%的基数是从哪来的？div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。

　　你设div的高度为100%,那么它是和什么地方相对为100%?前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%只要为html和body设置高度为100%就可以了html,body{height:100%;}   这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。

　　上面就是小编讲的关于手机网站高度怎么改变的问题，当然这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。这一点简直美呆了。你学会了吗？