CSS最大高度不起作用,但同一div的高度正在工作 [英] CSS max-height not working,but height for same div is working
问题描述
在我的外部css文件中,
#slider {
width:1200px;
height:800px;
margin:0 auto;
}
有效,但
#slider {
max-width:1200px;
最大高度:800px;
margin:0 auto;
}
没有。
给出0高度。<
我在最新的chrome浏览器上。
我在做什么错?
还有 -webkit-calc(100% - 100px)
或 calc( 100% - 100px)
不起作用。
我猜没有任何css2 / css3属性正在工作。
我使用的这个html文件是一个复杂的HTML的一部分,许多CSS和JavaScript包括。 css2被封锁或者其他文件中的东西?
更新:
指定最小高度作品,并设置高度您需要申请 height:100%; $ c>
max-height
,它将使其父母的高度
> 100% 最大高度
。此外,它只能占据其父母的空间。因此,如果它是 body 标签的第一个孩子,那么您可以这样做:
JS小提琴(以较小的宽度/高度为例)
html,
body {
height:100%;
宽度:100%;
}
#slider {
height:100%;
最大宽度:1200px;
最大高度:800px;
margin:0 auto;
$ / code>
使用 calc()
,它以同样的方式工作。这是关于其父母的身高/宽度。所以你可以这样做:
a> html,
body {
height:100%;
宽度:100%;
}
#slider {
max-width:500px;
最大高度:500px;
margin:0 auto;
height:calc(100% - 100px);
width:calc(100% - 100px);
}
In my external css file,
#slider {
width:1200px;
height:800px;
margin:0 auto;
}
works, but
#slider {
max-width:1200px;
max-height:800px;
margin:0 auto;
}
does not.
It gives 0 height.
I am on latest chrome browser.
What am I doing wrong?
Also -webkit-calc(100% - 100px)
or calc(100% - 100px)
doesnt work.
I am guessing none of css2/css3 properties are working.
This html file I am using is a part of a complex html with many css and javascript includes. Is css2 being blocked or something in some other file?
UPDATE:
Specifying min-height works, and sets the height of the div to its value.
解决方案 You need to apply height: 100%;
in addition to the max-height
which will make the height
100% of its parent up to its own max-height
. Additionally, it can only take up the space of its parent. So, if its a first child to the body
tag, you would do something like:
JS Fiddle (With smaller width/height for example)
html,
body {
height: 100%;
width: 100%;
}
#slider {
height: 100%;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
}
And to use calc()
, it works the same way. It is in relation to its parents height/width. So you could do something like:
html,
body {
height: 100%;
width: 100%;
}
#slider {
max-width: 500px;
max-height: 500px;
margin: 0 auto;
height: calc(100% - 100px);
width: calc(100% - 100px);
}
这篇关于CSS最大高度不起作用,但同一div的高度正在工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!