I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn't an option for me.
Any ideas on how to achieve a position: fixed div that fills the remaining width?
It's difficult to create a fiddle for this, but I'm working with Angular. Here's a simplified example:
<body layout="row">
<div layout="column" class="menu">
Menu
</div>
<div class="view">
<div class="toolbar">
I'm a toolbar
</div>
Rest of the stuff on the page
</div>
</body>
.menu {
height: 100%;
width: 300px; //current width anyway
}
.view {
width: 100%;
}
.toolbar {
background-color: grey;
width: 100%;
position: fixed;
height: 60px;
}
I have a similar situation to the user in this question: Position Fixed width 100%
But my challenge involves accounting for the dynamic side nav