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


Tags: css3

Problem :

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



Solution :

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

    CSS Howto..

    How to add a custom font to Rails app?

    How can I keep percentage-based elements from overlapping?

    how to vertical align a table inside a div

    How to position div's like this with CSS?

    How do I center a container in my HTML/CSS?

    Django - how to collapse forms like in the django admin

    How to adjust toaster popup width

    How do I add line-height to a