Login
网站首页 > 文章中心 > 其它

minheight100%_max-height和height

作者:小编 更新时间:2023-07-27 16:18:34 浏览量:420人看过

min-height 用来定义一个盒子做帆念的最小高纯困度,

height如果小于了min-height就会采用轿雀min-height

当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果。

原因是百分比的大小是相对其父级元素宽高的大小,如最外迹散层元素设置的百分比是对应屏幕而言的。

需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果:

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

子元素css: position: relative; left: -50%;

但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样姿颤氏式,我们可以这样解决(假设最外层的洞行div需要设置百分比高度样式):

html, body {

height: 100%;

}

.outDiv {

height: 50%;

不过这里有个需要注意的,若div里的内容超出了div的高度,在IE7◆的浏览器是无法将div撑起来的(IE6则可以),如果要顾及这一点,可以使用min-height解决(当然也要考虑IE6不支持min-height的问题):

min-height: 50%;

* html .outDiv {

最后说通俗点,如果你想把高度设为百分比,那么父级必须设置高度

max-height和min-height一个是用纯首神来防止撑起的盒子太大,一个是用来防止撑起的盒子太小

但是,芹卜max-height:100%和height:100%在某些情况下也不一样

当width:100%的时候,一张图片,你使用height:100%,图片会撑起整个父级做亏盒子

而你使用max-height,则会按比例撑起来,不破坏原来图片的百分比

最小高度,CSS3中的样式。IE6不支持。

比如min-height:20px;

意思是说,一个块元毕裤素,高度如果小于20像素,那么这个块元素就不会再自动变小,而是保持20像素不变。如果大于20像素,那么不受限制

至于,取值100%的意思,是这个高度值使用父伏空元素的高度手厅简值做限定

移动端页面很多时候我们想要一个自适应高度的容器,但是有时候 min-height:100% 设置了但是还是枝带无法撑起页面,这主要是100% 是基于父元素的,父元素的高度的是一个固定值猛首芦 例如

这样是可以让body撑起来的,但是如果是这样

这样body 是无法正确撑起来芹携的

以上就是土嘎嘎小编大虾米为大家整理的minheight100%_max-height和height相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章