CODEWITHSUNDEEP
javascripthtmlcss
Arnab Bhagabati
Arnab Bhagabati

Reputation: 2715

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.

Upvotes: 2

Views: 12894

Answers (2)

Johannes
Johannes

Reputation: 67748

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.

Upvotes: 0

Derek Story
Derek Story

Reputation: 9583

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

Upvotes: 4

Related Questions