CODEWITHSUNDEEP
htmlcsssafari
Federico
Federico

Reputation: 1422

calc (100% - 300px) working on Safari not of Firefox or Chrome

This is my HTML/CSS:

#all {
  text-align: center;
}
.photo_img {
  width: auto;
  max-height: -webkit-calc(100% - 300px);
  max-height: -moz-calc(100% - 300px);
  max-height: calc(100% - 300px);
  margin: 0;
  padding: 0;
  margin-top: 150px;
}
<div id="all">
  <img src="http://40.media.tumblr.com/ed8f597aae5d145a51a13a7eaddac58e/tumblr_nlh3w0m4GS1u4c0gpo1_1280.jpg" class="photo_img">
</div>

I don't know why it works only on Safari. Can you please help me making it cross-browser?

https://jsfiddle.net/q3fwavq5/

Upvotes: 1

Views: 1876

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240948

The problem is that you are using a percentage based height of 100%. The height of the .photo_img element determines the height of the parent element (since it's the only child) which render percentage based units useless because they aren't relative to anything. To solve this, you would need to set the parent element's height in percentages too. In doing so, .photo_img can have a max height of calc(100% - 300px) relative to the parent elements.

You could set the html/body/#all elements to have a height of 100%.. (a fixed height on just #all would work as well).

Updated Example

html, body, #all {
    height: 100%;
}

Alternatively, you could use viewport-relative units rather than percentage based units. In doing so, the height is based on 100% of the viewport (rather than the direct containing parent element).

Updated Example

.photo_img {
    max-height: calc(100vh - 300px);
}

Upvotes: 1

Related Questions