div css布局网页如何实现网页自动适应屏幕高度和宽度

html-css073

div css布局网页如何实现网页自动适应屏幕高度和宽度,第1张

网页里面的宽度是可以用百分比决定的,可以设置这个容器的宽度占屏幕宽度的百分之多少,但是因为百分比的宽度是要有参考对象的,所以在设置百分比的宽度时,要先设置body的宽度为100%。

照你的要求:一屏分为两栏显示,那么用两个DIV来做,一个DIV的宽度就是50%,两个在一起就正好100%了,如果你想这两个DIV之间有间距,那么就设置宽度为48%就行,具体自己把握,然后设置左边的DIV左浮动,右边的DIV右浮动即可。

高度是可以设置固定像素的,比如一个div的宽度为48%,高度为50px都行的,可以混用,只要记住使用百分比定义宽高长度就要设置对应的body的宽高为100%就行了

一般父级是不设置高度的,他里面的子级内容就会随子级内容高度的增加而自动增高,这样做的好处是样式很灵活,修改子级内容的时候没必要再修改父级的高度。

另外如果父级没设置高度,内部有子级浮动的时候,会使子级页面超出父级,需要给父级加个overflow:hidden属性,这样父级的高度同样也会随子级容器及子级内容的高度而自适应。

给ie6加个高度,这样ie6里它的高度确定了,如果比这个高度小就认这个高度,如果超出这个高度会自动伸展

min-height:200px_height:200px

看见网上也有加height:auto !important和overflow:visible的,都是为了超出高度的时候不至于出问题,我暂时没有遇到过,你可以参考着看加哪个合适。

min-height:200px /*高度最小值设置为:100px*/

height:auto !important/*兼容FF,IE7也支持 !important标签*/

height:200px/*兼容ie6*/

overflow:visible