CODEWITHSUNDEEP
htmlcsssass
Lewis Smith
Lewis Smith

Reputation: 107

SASS use screen height to calculate remaining vh after a set height div

So I have a div on my page that no matter the device size will be 209.53px. I would like to have a calculation that can work out what percentage of the screen that this covers. That way I can set a map/image to fill the remaining portion of the screen.

I have tried to use height 80% ect but I just can't get it right, is there any way in SASS/SCSS to achieve this?

So I would go:

209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING VH

div{
    height: REMAINING VH;
}

Upvotes: 2

Views: 7902

Answers (2)

Sachi Cortes
Sachi Cortes

Reputation: 964

You can't know which percentage of the vh represents a fixed height in css and by extension in sass/scss but you can leave the fixed height in 209.53 (I would recommend to round that value since css will do it anyway) and use css calc. Then your image would have the following height:

height: calc(100vh - 209.53px);

Other solution would be using absolute position and a margin top. Or better, use flex:

.parent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;

   .fixed-height-element {
        flex: 0 0 209.53px;    
    }

   .image {
        flex: 2;
    }
}

Upvotes: 3

dehart
dehart

Reputation: 1678

You set the top and bottom of your div element to get the remaining screen height:

body {
  padding:0;margin:0;
}

#fixed {
  height: 209.53px;
  background-color:green;
  width:100%;
}

#remaining {
  position:absolute;
  top: 209.53px;
  width:100%;
  bottom:0;
  background-color:red;
}
<div id="fixed">this has height 209.53px</div>
<div id="remaining">this has height until screen bottom</div>

SASS is a precompiler therefor it can't help with calculations regarding the screen height.

Upvotes: 0

Related Questions