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（），它以同样的方式工作。这是关于其父母的身高/宽度。所以你可以这样做：

JS Fiddle

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:

JS Fiddle

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屋！