css 拉伸子div以适应父div(网格)

jm2pwxwz 于 2023-03-24 发布在其他

关注(0)|答案(2)|浏览(149)

好的，我有一个网格，看起来像这样：

.grid-wrap {
    display: grid;
    grid-gap: 1.5em;
    margin: 1em;
}

.c-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width:100%;
    position: relative;
    margin: 0;
    background-color: #fff;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius);
}   

.item-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius) 0 0;
}

.item-content {
    padding: 4%;
    min-height: 0;
    position: relative;
    background: #ccc;
}

<div class="grid-wrap c-3">
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">A lot of text here that expands the div. A lot of text here that expands the div.
            </div>
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">Just a little text.
            </div>
        </a>
    </div> <!-- etc -->
</div>

到目前为止一切都很好。但是我想让div“item-content”与“Just a little text”拉伸到与“grid-item”剩下的高度相同。现在，“item-content”的高度只取决于它的内容。
我尝试过设置“item-content”height: 100%，也尝试过选项1（display：flex）建议的解决方案：https://stackoverflow.com/a/4805371/21319760
但运气不好。

css

来源：https://stackoverflow.com/questions/75791270/stretch-child-div-to-fit-parent-div-grid

2条答案

按热度按时间

2ic8powd1#

只需将每个.grid-item中的a标记设置为flex。然后告诉.item-content填充剩余的空间，我刚刚添加了大约6行到您的css：

.grid-wrap {
    display: grid;
    grid-gap: 1.5em;
    margin: 1em;
}

.c-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width:100%;
    position: relative;
    margin: 0;
    background-color: #fff;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius);
}   
.grid-item > a {
     display: flex;
     height: 100%;
     flex-direction: column;
}

.item-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius) 0 0;
}

.item-content {
    padding: 4%;
    min-height: 0;
    position: relative;
    background: #ccc;
    flex: 1;
}

<div class="grid-wrap c-3">
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">A lot of text here that expands the div. A lot of text here that expands the div.
            </div>
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">Just a little text.
            </div>
        </a>
    </div> <!-- etc -->
</div>

赞(0）回复(0）举报 2023-03-24

wh6knrhe2#

这是不可能做到的吗？我已经尝试了很多谷歌建议的解决方案，但没有运气。
我已经更新了原来的帖子，所以更容易看到我想达到的目标。

赞(0）回复(0）举报 2023-03-24