css 将div高度设置为与父div相同

nwwlzxa7 于 2023-08-08 发布在其他

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

下面是我的代码：

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: var(--background-color-gray);
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.welcome div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-black);
}

个字符
看起来像这个screenshot from my browser (firefox)
我需要的div包含“一些标题…”是高和宽，因为它的父有可用的空间（黑色背景应该是向上和向下的图像结束）
正如你所看到的，.welcome div中的width: 100%;可以工作，但是高度不行。我研究了一下，就是找不到为什么div不能扩展到它的父级。有谁知道我为什么以及如何解决这个问题吗？非常感谢您的光临。
我尝试了几种不同的方法，但都不起作用。大多数网站都说，如果你在一个div中有一个div，并将内部div的高度设置为100%，它会扩展到外部div的边框。为什么这在我的设置中不起作用？

css

来源：https://stackoverflow.com/questions/76846952/set-div-height-to-the-same-as-the-parent-div

2条答案

按热度按时间

sqougxex1#

只是改变你的CSS一点点..

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
  }

  .welcome {
    background-color: gray;
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    overflow: hidden;
  }

  .welcome div {
    border: 1px solid red;
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    color: white;
  }

字符串

赞(0）回复(0）举报 2023-08-08

avwztpqn2#

通过在父对象上设置align-items: center，你告诉flex垂直居中，因为父对象没有明确的高度，height: 100%不会像你期望的那样。
你可以通过
1.将align-items更改为stretch（或者完全删除规则，因为stretch是默认值，并且
1.从div本身删除高度规则，让flexbox处理高度。

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: gray;
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* <====== don't center it, stretch it. */
    overflow: hidden;
}

.welcome div {
    width: 100%;
    /* height: 100%; <============ lose this; let flex handle the height. */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    color: white;
}

个字符

赞(0）回复(0）举报 2023-08-08

我来回答

css 将div高度设置为与父div相同

2条答案

相关问题

热门标签

最新问答