css 两行高度自适应?

我在人海中寻找.
  • 22

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

<div class="f">
    <div class="h">123</div>
    <div class="s"></div>
</div>
回复
阅读 1.1k
4 个回答

不用flexbox好啦

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

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

s

-webkit-box-flex:1;

记得加上兼容前缀,兼容性比flex

不需要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>

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

宣传栏