CSS: calc() does not respect bottom padding in Firefox and IE

Question

I have a problem when I am using calc() in Firefox 32 and IE 11 the bottom padding of the div is not respected, in Chrome and Opera everything works.

Main content should have a fixed height and content should be scrollable.

Here is my html code:

<body>
<div class="main-content">
  <div class="header">header</div>
  <div class="content">
    content
    <div class="long-content">
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      <button type="button">Button</button>
    </div>
  </div>
</div>

and css:

.main-content {
  width: 100%;
  background-color: #595959;
  height: 300px;
}

.header {
  background-color: #000000;
  height: 50px;
}

.content {
  background-color: red;
  padding: 15px;
  height: calc(100% - 50px);
  overflow: auto;
  position: relative;
}

How could I fix this?

DEMO

As the header has a fixed height, is there a reason why you don't use position `absolute` with `top:50px; bottom:0px;`? — t.niese, Sep 03 '14 at 08:45
Why can't you add padding to the `long-content` div instead? — Morpheus, Sep 03 '14 at 08:57
Yes that's true, I just was wondering why you use `calc` as position `absolute` has a better browser support. To your problem: that the padding is not visible is because Mozilla/MS interpret the specs that way: [Bug 748518 - padding-bottom is ignored with overflow:auto;](https://bugzilla.mozilla.org/show_bug.cgi?id=748518#c17) — t.niese, Sep 03 '14 at 08:58
@Morpheus here long-content is only example in the real app I can have other childrens and I would like to have content to work properly. — Bartosz Bialecki, Sep 03 '14 at 09:00
Sorry @SyedAliTaqi but I don't see that it works, the button is still at the bottom without padding. — Bartosz Bialecki, Sep 03 '14 at 09:03
What is the reason why you could not use [an `inner` element with the padding](http://jsfiddle.net/2g789bgv/9/) ? — t.niese, Sep 03 '14 at 09:18
I can of course, in the real app my layout has more nested divs and I just would like not add another one if I don't have to, but I think I have no other choice. — Bartosz Bialecki, Sep 03 '14 at 09:23
Changing the scope of the question nearly an hour later is not cool. Try to get your question right the first time. You've wasted a lot of peoples time. — Alex, Sep 03 '14 at 09:25
@AlexThomas The question might be worded wrong, but as you can see by my comment I posted 30min ago it was still understandable. — t.niese, Sep 03 '14 at 09:28
@t.niese congratulations to you for bringing your mind reading skills today. You were the only one. — Alex, Sep 03 '14 at 09:30
I thought that it is clear but I understand that not everyone must know what I had in mind. I will try to be more precise. Thanks for your help. — Bartosz Bialecki, Sep 03 '14 at 09:35
@AlexThomas Well the added `Main content should have a fixed height and content should be scrollable.` does not clarify the question as this should already be known by `height: calc(100% - 50px); overflow: auto;`. The problem with the question still exists. And I bet the written that way the answers would have been most likely the same. It is not easy to phase that kind of question. And blaming the the OP cause of this is not that nice. — t.niese, Sep 03 '14 at 09:35

score 2 · Accepted Answer · edited May 23 '17 at 12:30

The problem you have is that Chrome interprets the specs a different way then FF & IE does. As you can see in this answer and in the bug report Bug 748518 - padding-bottom is ignored with overflow:auto; it is not fully clear who is correct about it.

As you would like to avoid to use an inner container you could add an element after the content using the :after pseudo class and the content property.

.content:after {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}

.content {
  background-color: red;
  padding-top: 20px;
  padding-left: 20px;
  height: calc(100% - 50px);
  overflow: auto;
  position: relative;
}

jsfiddle demo

You for sure need to check if that meets your requirements with the browser compatibility. But as you also use calc this should be ok.

That at least will solve that padding at the bottom, there also might be a solution for the padding on the right side, but as you just talk about the one on the bottom I did not think about that case.

score 0 · Answer 2 · answered Sep 03 '14 at 08:42

0

If you put the calc() in quotes it works - height: calc('100% - 50px');

See here - http://jsfiddle.net/2g789bgv/1/

answered Sep 03 '14 at 08:42

Alex

8,875
2
27
44

I think this is not what I mean, the main content should always be 300 px height, when you add quotes it is extended to height of the children. – Bartosz Bialecki Sep 03 '14 at 08:45
1

And does this not do it? Im afraid i'm confused as to what you actually want. – Alex Sep 03 '14 at 08:47
I want to main contet to have fixed height and the content inside it to scroll when neccesery. – Bartosz Bialecki Sep 03 '14 at 08:53
@Bartosz Bialecki you should probably mention 'scroll' in your question then. – Alex Sep 03 '14 at 09:11
Putting it in quotes will result in an invalide property and will not be interpreted that way and is the same as if you would remove that property from the rule itself. – t.niese Sep 03 '14 at 09:43

score 0 · Answer 3 · answered Sep 03 '14 at 08:48

0

The padding is added to the height of the div. Meaning that the height of .content is 100% - 50px + 15px + 15px. If you would like the padding to be within the height, use box-sizing: border-box.

.content {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

More info can be found here

answered Sep 03 '14 at 08:48

GreyRoofPigeon

17,833
4
36
59

@BartoszBialecki, then please clarify what the desired result is, because I made this [example](http://jsfiddle.net/2g789bgv/5/) and added a jQuery function that writes the height of `.content` inside the header. It says 250px. The height of `.content`'s parent is 300px and you want `.content` to be that height minus 50px, which is 250px. That seems to me what you want... – GreyRoofPigeon Sep 03 '14 at 09:07
I want to content to be scrollable and main content to have a fixed height and content should have a padding around it, but the bottom padding is not working, Firefox and IE ignores bottom padding. – Bartosz Bialecki Sep 03 '14 at 09:10

CSS: calc() does not respect bottom padding in Firefox and IE

3 Answers3