时间戳

首页 > 解决方案 > 如何将 CSS flex 属性应用于嵌套元素

css - 如何将 CSS flex 属性应用于嵌套元素

问题描述

这是我的代码

<div class="site">
<header>
    This is my header
</header>

<div class="content">
    <div class="inside">
        <div id="first">
            </div> 
        <div id="last">
            </div>
        </div>
    </div>
<footer>
    This is my footer
</footer>
</div>

风格

header {
  background-color: blue;
}
footer {
  background-color: brown;
}

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
  height: 90px;
  background-color: blueviolet;
}
#first {
  background-color: yellow;
  height: 40px;
}
#last {
  background-color: green;
  height: 100px;
}
.inside {

}

这给了我这样的输出。 在此处输入图像描述

我需要的是绿色的 div 应该放在页面的底部，它应该在页脚的顶部。我的黄色 div 应该伸展并填满扩孔的紫色空间。意味着不应该有紫色。

如何使用 CSS flex 属性实现这一点？

标签： cssflexbox

解决方案

像这样试试。您不需要带有inside类的 div。

header {
  background-color: blue;
}
footer {
  background-color: brown;
}

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
  background-color: blueviolet;
  display: flex;
  flex-direction: column;
}
#first {
  background-color: yellow;
  flex: 1;
}
#last {
  background-color: green;
  height: 100px;
}
.inside {
  display: flex;
  flex-direction: column;
}
<div class="site">
<header>
    This is my header
</header>

<div class="content">
    <div id="first">
        First
        </div> 
    <div id="last">
    last
        </div>
    </div>
<footer>
    This is my footer
</footer>
</div>

推荐阅读