1

I am trying to dynamically make a div fill remaining space in the window based on sibling height.

The idea is that if the header div changes height the page-wrapper will dynamically change its height based on the remaining space. (avoid overflow if the header div changes height)

Header.sass

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
}

index.html

<html>
  <head></head>
  <body>
    <div id="root">
      <div class="header">
        <div>
          ...
        </div>
      </div>
      <div id="page-wrapper">
        div will fill remaining space
      </div>
    </div>
  </body>
</html>

Current solution

i understand i can achieve this using cal() however this will involve changing the hard coded value for $headerHeight if the header height changes

.page-wrapper {
   height: calc(100vh - #{$headerHeight});
   background-color: red;
}
Jay P
  • 596
  • 7
  • 23
  • Thank you this did answer my question, i cam across it earlier, but it didn't seem to work. I have just re tried it as per your suggestion and it now works (worry for the duplicate i'm tired today) Thank you – Jay P Oct 10 '18 at 14:53

0 Answers0