CSS max-height not working,but height for same div is working

问题

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.

回答1:

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);
}

回答2:

It depends what you are trying to do. But I suppose at the moment you have no content in that element – if no heightis defined, the height will depend on the contents. Try to put more and more content/text/images into it – it will grow up to the max-height value, after which a scrollbar will appear.

来源：https://stackoverflow.com/questions/38425618/css-max-height-not-working-but-height-for-same-div-is-working

标签

javascript

html

css

css3