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

admin管理员组

文章数量:1400503

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 plex 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.

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 plex 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.

• javascript
• html
• css

Share Improve this question Follow edited Jul 17, 2016 at 20:45 Arnab Bhagabati asked Jul 17, 2016 at 20:24 Arnab BhagabatiArnab Bhagabati 2,74444 gold badges3838 silver badges5656 bronze badges 5

• Does your slider look smaller than 1200px when you specify max-width ? – Yasin Yaqoobi Commented Jul 17, 2016 at 20:26
• 1 What are you trying to do? max-width doesn't set the width, it just says that's how wide the element can be. – yaakov Commented Jul 17, 2016 at 20:27
• 9 seconds too late! – yaakov Commented Jul 17, 2016 at 20:28
• I am trying to set the width/height of the slider div.do we need to have both width and max-width property for an element. – Arnab Bhagabati Commented Jul 17, 2016 at 20:33
• add a min-height as well or height: auto; – Ray Commented Jul 17, 2016 at 20:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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.

本文标签： javascriptCSS maxheight not workingbut height for same div is workingStack Overflow