css让子元继承父元素的高度

情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。

现在情况

 <style>
        .far{
            border: 1px solid bisque;
        }
        .s1{
            height: 150px;
            width: 100px;
            background-color: blue;
            display: inline-block;
        }
        .s2{
            height: 100%;
            width: 50px;
            background-color: brown;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="far">
        <div class="s1"></div>
        <div class="s2"></div>
    </div>
</body>

方法1：

　　设置父元素flex，子元素不设置高度

<style>
        .far{
            border: 1px solid bisque;
            display: flex;
        }
        .s1{
            height: 150px;
            width: 100px;
            background-color: blue;
            display: inline-block;
        }
        .s2{
            width: 50px;
            background-color: brown;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="far">
        <div class="s1"></div>
        <div class="s2"></div>
    </div>
</body>

方法2：

　　父元素相当定位，子元素绝对定位，设置100%高

 .far{
            border: 1px solid bisque;
            position: relative;
            font-size: 0;
        }
        .s1{
            height: 150px;
            width: 100px;
            background-color: blue;
            display: inline-block;
        }
        .s2{
            width: 50px;
            background-color: brown;
            display: inline;
            position: absolute;
            height: 100%;

        }

    </style>
</head>
<body>
    <div class="far">
        <div class="s1"></div>
        <div class="s2"></div>
    </div>
</body>

s1和s2元素都要设置inline或者inline-block属性，否则不法自动在一行，要在设置left，top等属性

posted @ 2021-02-03 15:26  忽闻河东狮子吼  阅读(6170)  评论(0)  编辑  收藏  举报