I have a website that features a side-bar navigation and a main content pane, both enclosed within a container element. The content has its own unique background styling, while the menu adopts the background of the parent container.
In situations where the sidebar is longer than the content section, I want the height of the content element to expand all the way down to match the same height as the sidebar. This ensures that the content area occupies the majority of screen space for a cohesive design layout.
This can be achieved by setting the container to display: table and applying display: table-cell to both child elements. This arrangement places them side by side while maintaining equal height.
Now, my goal is to include two additional navigation bars inside the content area - one fixed at the top and the other fixed at the bottom of the content pane. To accomplish this, I utilize position: relative on the content section and position: absolute on the additional navigation bars.
While this solution works effectively on modern browsers, Firefox versions prior to 31 do not support using position: relative on table-cell elements, leading to the navbars being positioned relative to the document body instead.
Is there a way to make this solution compatible with all mainstream browsers? It's crucial to ensure that the content element expands to match the height of the sidebar.
Useful Links:
- JSFiddle showcasing the issue
- Live website facing the problem
Here is a simplified example of the code structure:
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;
}<div>
<nav>
Sidebar
</nav>
<main>
<header>
Top navbar
</header>
Content
<footer>
Bottom navbar
</footer>
</main>
</div>