CSS 获取 inline-block 元素的高度以填充父元素

在本文中，我们将介绍如何获取 inline-block 元素的高度以填充父元素，并提供示例说明。

阅读更多：CSS 教程

了解 inline-block 元素

在 CSS 中，我们可以使用 inline-block 属性来设置元素的显示方式。与常规的块级元素不同，inline-block 元素可以水平排列，并且可以在同一行内显示多个元素。

然而，与块级元素不同，inline-block 元素的高度默认是由其内容撑开的，而不是填充整个父元素。因此，在某些情况下，我们需要获取 inline-block 元素的高度以填充父元素。

使用 padding-bottom 来填充

一种常用的方法是使用 padding-bottom 属性来填充 inline-block 元素的高度以适应父元素的高度。我们可以设置一个百分比值的 padding-bottom 值，该值相对于元素的宽度。通过调整 padding-bottom 的比例，我们可以使 inline-block 元素的高度紧密贴合父元素。

<style>
    .parent {
        width: 300px;
        background-color: lightgray;
        text-align: center;
    }

    .child {
        display: inline-block;
        width: 80%;
        padding-bottom: 80%;
        background-color: lightblue;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

在上面的示例中，我们设置了一个父元素和一个 inline-block 的子元素。子元素的宽度设置为父元素宽度的80%，通过 padding-bottom 属性设置子元素的宽度和高度为80%。这将导致子元素的高度与其宽度相等，并与父元素的宽度相匹配。

使用伪元素来填充

另一种方法是使用伪元素来填充 inline-block 元素的高度。我们可以使用 ::before 或 ::after 伪元素在元素内部创建一个空的块级元素，并设置伪元素的高度为100%。通过将伪元素的高度设置为100%，我们可以使其高度填充整个 inline-block 元素，从而使其高度与父元素相匹配。

<style>
    .parent {
        width: 200px;
        background-color: lightgray;
        text-align: center;
    }

    .child {
        display: inline-block;
        width: 80%;
        background-color: lightblue;
        position: relative;
    }

    .child::before {
        content: "";
        display: block;
        padding-top: 100%;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

在上面的示例中，我们设置了一个父元素和一个 inline-block 的子元素。子元素的宽度设置为父元素宽度的80%，并使用 position: relative 将其定位类型设置为相对定位。接着，我们使用 ::before 伪元素在子元素内部创建一个空的块级元素，并设置其 padding-top 为100%。这样，伪元素的高度将填充整个子元素，使其高度与父元素相等。

总结

通过使用 padding-bottom 属性或伪元素，我们可以获取 inline-block 元素的高度以填充父元素。这些方法都能够有效地解决 inline-block 元素高度不填充父元素的问题，并且适用于多种布局需求。

但是需要注意，通过 padding-bottom 或伪元素填充的方法仅适用于确定宽度的情况下。如果 inline-block 元素的宽度是相对于内容自适应的，那么这些方法可能会导致元素宽度异常。在这种情况下，我们可以使用其他方法，如使用 flexbox 或 grid 布局来实现 inline-block 元素的高度填充。