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

本文转载自查看原文 2021-02-03 15:26 1423 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等属性

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？ css 子元素使用float,而父元素没有高度，不能自适应的问题 div随内容调整高度(父元素高度随子元素变化) 子元素绝对定位，父元素高度自适应子元素高度 HTML撑起浮动子元素得父元素高度 Javascript禁止子元素继承父元素的事件 div高度自适应(父元素未知，所有高度跟随子元素最大的高度) 子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题