首页编程minheight css中min-height和height的问题

minheight css中min-height和height的问题

编程之家 2023-11-02 205次浏览

大家好,今天来为大家解答minheight这个问题的一些问题点,包括css中min-height和height的问题也一样很多人还不知道,因此呢,今天就来为大家分析分析,现在让我们一起来看看吧!如果解决了您的问题,还望您关注下本站哦,谢谢~

minheight css中min-height和height的问题

css中min-height和height的问题

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

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

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

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

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

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

minheight css中min-height和height的问题

html, body{

height: 100%;

}

.outDiv{

height: 50%;

}

minheight css中min-height和height的问题

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

html, body{

height: 100%;

}

.outDiv{

min-height: 50%;

}

* html.outDiv{

height: 50%;

}

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

为什么火狐设置最小高度min-height没有反应

您好!

要定义一个最小高度为600px的div,可以这样写:

{height:auto!important;height:600px; min-height:600px;}

则div在IE与firefox中都会有一个最小高度,且高度会自适应内容的长度。

希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

了解更多火狐浏览器的使用小技巧,请到火狐社区:http://mozilla.com.cn/moz-portal.html

感谢您对火狐浏览器的支持!

OK,本文到此结束,希望对大家有所帮助。

新世界机房,香港新世界机房服务器怎么样 香港沙田服务器 香港沙田机房怎么样