Two elements of the same height + absolutely positioned children

I have a website with sidebar navigation and a main content pane wrapped in a container element. The content has its own background, while the menu borrows the content of the parent container.

In cases where the sidebar is longer than the content, I need the content element to stretch all the way to cover the same height so that the background content makes up most of the screen space to make the design look silly.

This works great by providing a display: table container and both display: table-cell children . This will place them next to each other and ensure that they are always the same height.

However, I now want to have two smaller navigation bars in the content. One attached to the top, one to the bottom of the panel. I am using position: relative for content and position: absolute on nav bars to achieve this.

Problem: . This solution works fine in modern browsers, but Firefox versions prior to 31 do not accept position: relative element of the table-cell, and navbars are located relative to the document body.

Question: Can I somehow make this solution work for all common browsers? I need to maintain for a content element to stretch with a sidebar.

Links:

• JSFiddle demonstrates the problem
• A live site suffering from a problem

An example of simplified code:

HTML:

<div>
    <nav>
        Sidebar
    </nav>
    <main>
        <header>
            Top navbar
        </header>

        Content

        <footer>
            Bottom navbar
        </footer>
    </main>
</div>

      

        
        
        
      

    

CSS

div {
    display: table;
    width: 100%;
}

nav {
    vertical-align: top;
    display: table-cell;
    width: 25%;
}

main {
    display: table-cell;
    position: relative;
}

main header, main footer {
    position: absolute;
}

main header {
    top: 0;
}

main footer {
    bottom: 0;
}