使子 HTML 元素垂直和水平填充它的父容器-（CSS 和 Flexbox）[重复]

Question

我不知道如何让子元素 (#child3) 垂直和水平填充它的父容器。

我已经尝试了 100 种使用和不使用 Flexbox 的不同方法，但我不知道如何做到这一点。有谁知道这是怎么实现的？

#container{
        
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
}
    
#child3{}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>

Answer 1

试试

#child3 {
  width: 100%;
  height: 100%;
}

百分比是相对于父元素的。

Answer 2

您只需将#child3 父级的宽度设置为 100%。您可以在代码块中看到它。

#container{
        
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
}
    
#child3{
  width: 100%;
  height: 100%;
  background: red;
}

.w-100 {
  width: 100%;
}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li class="w-100"><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>

推荐你玩这个游戏来学习more about flexboxes.

Answer 3

如果您只想填充父级，只需添加 #child3 的样式

width: 100%;
height: 100%;

但是如果你想填充父级的整个空间，你应该首先删除ul的最后一个子级的填充，在这里添加一些东西：

#container nav ul li:last-child{
      margin-left: auto;
      padding 0;
}

然后在#child3 中添加 100% 的高度和宽度。但这会改变#child3 父级的宽度，因此您向#child3 添加填充

您的代码将如下所示

#container{
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
  
  /* just to view the size of the element */
  background: black;
  opacity: 50%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
  padding: 0;
}
    
#child3{
  height: 100%;
  width: 100%;
  padding: 0rem 2rem;
  
  /* just to view the size of the element */
  background: red;
  opacity: 50%;
}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>