How to use calc in CSS for mozilla firefox without position absolute

Question

I would like a div to be 100% height minus 197px on every screen. I have used the CSS function cal as follow.

<style>
#div1 {

    left: 300px;
    height: calc(100% - 197px);

    border: 1px solid black;
    background-color: yellow;

}
</style>

p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>

It works so far on most browser except for Firefox where it only works when I add position: absolute;

My problem is that Position absolute creates a conflict with some of my previous code. So my question is How to use calc in CSS for mozila firefox without position absolute ?

Jsfiddle

Please create an [mcve], as the styles of your elements wrapping your `div` is very important. — Alexander O'Mara, Aug 07 '16 at 03:06
From your fiddle, you don't any height defined on the parent elements, so height based percentages do not work as expected. — Alexander O'Mara, Aug 07 '16 at 03:35
If i get you right, am i supposed to place a height by default on the div ? What i want is the div's height to be calculated. How do i do that please ? — Man Of God, Aug 07 '16 at 03:39
Possible duplicate of [Percentage Height HTML 5/CSS](https://stackoverflow.com/questions/1622027/percentage-height-html-5-css) — Alexander O'Mara, Aug 07 '16 at 03:44
No i need a calculated height. A height minus 197px. The link you sent above points to a height based on the viewport only but i need the view port minus 197px. How to get that done is my question. Do you please know the answer to that ? — Man Of God, Aug 07 '16 at 03:51
At least one of the answers explains what you need to make percentages work. Your calc contains a percentage, so it must also meet these requirements. — Alexander O'Mara, Aug 07 '16 at 04:03
I have gone to each of the examples but none of them enables me to calculate the div height minus something neither do they solve my problem — Man Of God, Aug 07 '16 at 04:17

score 2 · Answer 1 · answered Aug 08 '16 at 05:16

2

For All Mozilla And Safari, Chrome And IE All Versions Supports This Code

height:clac(100% - 197px);
height:-webkit-clac(100% - 197px);
height:-moz-clac(100% - 197px);

answered Aug 08 '16 at 05:16

Samudrala Ramu

2,088
1
15
36

Great so i guess i have to add them all. – Man Of God Aug 08 '16 at 14:30

Madalina Taina · Accepted Answer · 2016-08-08T13:36:27.573

1

You don't need an absolute position, you need to have a parent for the div with a specified height.

.wrap{
  height:100vh;
}

or

.wrap{
  height:250vh;
}

the html:

<div class="wrap">
  <p>Create...</p>
  <div id="div1">Some text...</div>
</div>

More details here:

Update:

With image:

<div class="wrap">
  <img id="div1" src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg">
</div>

css

#div1 {
    left: 300px;
    height: calc(100% - 197px);
    border: 1px solid black;
    background-color: yellow;
    float:left;
}
#div1 img{
  height:100%;
}
.wrap{
  height:100vh;
}

update:

http://jsfiddle.net/Dxn5d/29/ This set the height for the wrap div and display only the top of the image.

#div1 {
    left: 300px;
    height: calc(100% - 197px);
    border: 1px solid black;
    background-color: yellow;
    float:left;
    overflow:hidden;
}
#div1 img{
  height:auto;
}
.wrap{
  height:100vh;
}

edited Aug 08 '16 at 13:36

answered Aug 08 '16 at 05:35

Madalina Taina

1,968
20
26

Plus one. But please can you make it work with image ? It works with text but it does not wrap itself around an image properly. Kindly check this and let me know if you can help . One way or the other this is the answer but i wish i could wrap images also aside of text like in this example http://jsfiddle.net/Dxn5d/26/ – Man Of God Aug 08 '16 at 10:14
I was expecting it not to display the full image but display only part of it based on the container's height. Is there a way to make it display only the part of the image that can be seen from the container's height ? I want the image to keep it's size but the container to display only the 100% minus 197px of it. I will be much grateful if you could help with that – Man Of God Aug 08 '16 at 13:25
@ManOfGod I will add the code. Next time, please be more clear :). – Madalina Taina Aug 08 '16 at 13:32
@ManOfGod I hope this will finally help you :). – Madalina Taina Aug 08 '16 at 13:37

How to use calc in CSS for mozilla firefox without position absolute

2 Answers2