I am encountering an issue with the calc() function in Firefox 32 and IE 11, where the bottom padding of a div is not being respected. However, this problem does not occur in Chrome and Opera.
The main content section should have a fixed height while allowing its contents to be scrollable.
Below is a snippet of my HTML code:
<body>
<div class="main-content">
<div class="header">header</div>
<div class="content">
content
<div class="long-content">
[long content with breaks]
<button type="button">Button</button>
</div>
</div>
</div>
and here is the CSS used:
.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;
}
Any suggestions on how I could resolve this issue?