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

    IE10 has extra margin above an inline header. How do I remove it?

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How to implement padding-free sprites in css?

    How to apply different CSS styles to 2 elements with the same class name?

    How to set the background image of an DIV in CSS?

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    How to float images left and right without text wraps

    how to create a facebook look alike gallery with css and jquery? [closed]

    CSS, how to put a div inside a div that is responsive?

    How to draw a responsive shape [closed]

    How to extend Navigation in CSS

    How to make a transparent border using CSS?

    A really simple question: How to apply a style to an iframe whose parent tag's id is known?

    Show/Hide function between JS, CSS, and HTML

    how can i center a nested div

    How to assign CSS to images which have specific extension, height and width?

    Using Javascript or JQuery to show/hide on click, and change image as well

    How to center multiple div elements within a parent div?

    How can I float dynamic div's next to each other?

    How do I fit text into footer margins

    How to create an div background that is not affected by page zoom with CSS

    CSS & Button: How to override native CSS of html buttons element?

    How can I enable CSS selector profiling in Chrome

    How to remove/add jQueryUI CSS theme from specific element?

    How to remove style type css wordpress from header?

    How to update current css version in asp.net

    How to remove extra space after a colon in CSS with Sublime Text 2?

    How to change the mouse cursor over an embedded flash?

    How to fix this common problem of position:fixed elements not expanding to its parent width?

    How can I hide page elements till an AJAX call completes?