css 两行高度自适应？

Question

假如f的高度确定，s的高度是响应式动态变化的，那么请问如何让s的高度自动分配f的剩余高度，在不使用flex和grid的情况下，请大佬指点一下，谢谢

<div class="f">
    <div class="h">123</div>
    <div class="s"></div>
</div>

Answer 1

display: table;
https://jsrun.net/VkPKp/edit

Answer 2

不用flex用box好啦

父容器，高度需要确定不能用auto

display: -webkit-box;
-webkit-box-orient: vertical;

s

-webkit-box-flex:1;

记得加上兼容前缀，兼容性比flex好

Answer 3

不需要flex, 直接让子项高度填满父容器就ok了

        <style>
            .f {
                height: 300px;
            }

            .s {
                height: 100%;
                border: 1px solid;
            }
        </style>

        <div class="f">
            <div class="h">123</div>
            <div class="s"></div>
        </div>

Answer 4

也可以用calc，如这个示例。
如果你要兼容很老的浏览器，比如IE6-8，那就考虑用JS来实现吧，也并不复杂。