1

I'm going to keep this brief, all the browsers I've tested have worked, firefox is the only browser that decides it's going to not drop the declaration but to ignore it?

I'm using the following CSS

header{height:118px;}
section#head{padding:0% 12.5%;padding-top:200px;min-height:60%;min-height:calc(100% - (118px + 200px));}
.splitOb{width:50%;float:left;}

.clearfix:after{display:block;content:'';visibility:hidden;clear:both;}

And my HTML

<header>
    <h1>Header</h1>
</header>
<section id="head">
    <h1>Make me in the middle D'X</h1>
</section>
<section id="examples">
    <div class="split clearfix">
        <div class="splitOb">
            <h2>Left</h2>
        </div>
        <div class="splitOb">
            <h2>Right</h2>
        </div>
    </div>
</section>

Now I've heard that float can cause firefox issues with min-height and read that adding overflow:hidden; on the parent can solve this like:

.clearfix{overflow:hidden;}

But no, firefox still wants to ignore me... ...please somebody tell me how to get firefox's attention and make my element the correct hight DX

bashleigh
  • 8,813
  • 5
  • 29
  • 49
  • can u add a jsfiddle as this doesnt seem to be complete code to test – naman kalkhuria Mar 03 '15 at 10:40
  • don't think the problem is with calc, other wise it was drop the declaration. I'll add a jsfiddle thingy :d – bashleigh Mar 03 '15 at 10:51
  • seems to work fine for me: http://jsfiddle.net/5jk81kus/3/, not sure if this is just a copy and paste error but you have missed the closing `}` from the `section#head` style – Pete Mar 03 '15 at 11:01
  • Oh yea :p well here's my jsfiddle: http://jsfiddle.net/gv5yr09b/ – bashleigh Mar 03 '15 at 11:08
  • that's weird @Pete, Yours works for me in firefox but mine doesn't? Want to take a look? :d – bashleigh Mar 03 '15 at 11:10
  • ah ok, you have missed off the adding the height to html and body - if you have a percentage height then you need to set the height for body and html (or have a pixel height set on its parent if you don't set a body and html height) - http://jsfiddle.net/gv5yr09b/1/ – Pete Mar 03 '15 at 11:12
  • @pete I knew it would be something simple :p it works on my example but not my site... not sure what I've done XD lol – bashleigh Mar 03 '15 at 11:18
  • Are you just trying to get a 100% height body? If so I suggest you look at [this post](http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083). The approach I use is more cross browser friendly than using calc – Pete Mar 03 '15 at 11:26
  • 1
    Cool :) thanks for your help @Pete, I solved my problem putting both the `#head` and `header` into a container at `100%`. Easier solution :) – bashleigh Mar 03 '15 at 11:50

1 Answers1

0

May be it will help you.

Use browser prefixes:

/* Firefox */
-moz-calc(75% - 100px);
/* WebKit */
-webkit-calc(75% - 100px);
/* Opera */
-o-calc(75% - 100px);
/* Standard */
calc(75% - 100px);
Pradeep Rajput
  • 724
  • 7
  • 11