Question

我有一个内部div（＃main-items），其父级未设置为100％的高度，但我仍然希望它采用其余视口的高度而不将其位置设为绝对。可能吗？

如果我使用100vh，则其高度与视口的高度相同，但这意味着它还有一些额外的像素（作为“ header” div元素的高度）。

（请参阅jsfiddle完整代码）

<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/

Answer 1

那么您想要的是100vh减去标题高度吗？试试这个：

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

这是假设您的标头高度是固定的

内部div如何获取其余视口高度

1 个答案: