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】子元素浮動到了父元素外，父元素沒有隨子元素自適應高度，如何解決？ CSS中父元素高度沒有隨子元素高度的改變而改變，應該如何解決？阻止子元素繼承父元素事件阻止子元素繼承父元素的opacity css 子元素使用float,而父元素沒有高度，不能自適應的問題 div根據父元素根據子元素高度自適應高度 div隨內容調整高度(父元素高度隨子元素變化)