Clever Geek Handbook

Get the top coordinate self & # 8594; calc (100vh - y)

I have an element and I want it to take up all the space underneath it to the bottom of the browser window.

Is there some way to get the y offset of an element for this? I don't know how to determine y:

.occupy-space-below {
    max-height: calc(100vh - y);
}
+3


source to share


1 answer


Instead of using calc

(since your top item is of unknown height) ...
you can achieve this easily using flexbox



/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


.flex-column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grow{
  flex: 1;
  background: gold;
}
      

        
        
        
      

    
<div class="flex-column">

  <div>
    I<br>have <br>unknown<br>height
  </div>

  <div class="grow">
    occupy space below
  </div>

</div>
Run codeHide result


+5


source






More articles:


All Articles