CODEWITHSUNDEEP
htmlcss
Loves2Develop
Loves2Develop

Reputation: 824

How can an inner div take the rest of the viewport height

I have an inner div (#main-items) that has parents that are not set to 100% height but I still want it to take the rest of the viewport height without making it's position absolute. Is it possible?

If I use 100vh it's height is the same as the view-port's height but it means it has a few extra pixels (as the height of the 'header' div element).

(see jsfiddle full code)

<div id="main" class="w-100" style="display: block;">
<div class="d-flex justify-content-between">
    <div class="col-2 d-flex flex-column">
        <button id="adminButton" class="btn btn-primary" tabindex="0">MANAGE</button>
    </div>
    <div id="main-content" class="d-flex flex-column flex-grow-1">
        <div class="header">HEADER</div>
        <div id="main-items" class="d-flex flex-column justify-content-around">
            <div class="item">
                <span class="item-hours">9</span>
                <span class="divider">:</span>
                <span class="item-minutes">22</span>
                <span class="item-name">AAA</span>
            </div>
            <div class="item">
                <span class="item-hours">8</span>
                <span class="divider">:</span>
                <span class="item-minutes">07</span>
                <span class="item-name">BBB</span>
            </div>
            <div class="item">
                <span class="item-hours">5</span>
                <span class="divider">:</span>
                <span class="item-minutes">12</span>
                <span class="item-name">CCC</span>
            </div>
        </div>
    </div>
    <div class="col-2">
    </div>
</div>

https://jsfiddle.net/guynimni/wt5d1rov/

Upvotes: 0

Views: 73

Answers (1)

Erwin Sanders
Erwin Sanders

Reputation: 306

so what you want is 100vh substracted by header height? Try this:

#main-items {
   height: calc(100vh - 39px);
}

this is assuming your header height is fixed

Upvotes: 2

Related Questions