CSS百分比界定高宽比为何沒有实际效果

日期:2020-10-21 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

当大家给块级元素设定回应式高宽比的情况下,比如给div设定height=50%,常常没能看到实际效果。

缘故是百分比的尺寸是相对性其父级元素宽高的尺寸,如最外层元素设定的百分比为对应显示屏而言的。

必须掌握的是针对宽度来讲,其父级元素不必明确宽度就可以设定百分比,比如大家能够运用这个特点给未知宽度的块级元素设定水平垂直居中实际效果:

父元素css: position: relative/absolute; left: 50%;

子元素css: position: relative; left: ⑸0%;

但高宽比则不一样,若某元素的父元素沒有明确高宽比,则没法合理应用height=XX%的款式,大家能够这样处理(假定最外层的div必须设定百分比高宽比款式):

拷贝编码
编码以下:

html, body {
height: 100%;
}
.outDiv {
height: 50%;
}

但是这里有个必须留意的,若div里的內容超过了div的高宽比,在IE7+的访问器是没法将div撑起来的(IE6则能够),假如要顾及这1点,可使用min-height处理(自然也要考虑到IE6不适用min-height的难题):

拷贝编码
编码以下:

html, body {
height: 100%;
}
.outDiv {
min-height: 50%;
}
* html .outDiv {
height: 50%;
}