0

I have a side nav that can be collapsed. I want my toolbar div to be fixed to the top and fill the rest of the width. 100% causes it to go off the page. I can't do a calc() because of the dynamic width of the sidenav.

How can I set a position: fixed div to fill the remaining width?

This is really hard to make a fiddle for, I'm using angular but basically: 

<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;
}

The problem looks similar to this guy: Position Fixed width 100%

But I have the issue of the dynamic side nav

Community
  • 1
  • 1
CaptainOfTheSky
  • 106
  • 10

1 Answers1

0

If you set the CSS right property on the element with position: fixed, it will not go past the edge of the page:

right: 0;

Make sure you remove the width: 100% as well.

rvighne
  • 20,755
  • 11
  • 51
  • 73