只有一个孩子带有显示flex的100％父母身高？

Question

在以下代码中，我div的{​​{1}}类container属性设置为display，并且有两个flex个子类div }}和sidebarcontainer我希望mainpage使用类'sidebarcontainer'来获取父div的100％高度。

代码：https://jsfiddle.net/dydjgp9g/

但实际上我并不一定要div为父母，但是如果我删除整个页面的话就会向下移动！

怎么做？

display: flex

/*******************page layout**************************/

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  align-items: flex-start;
}

.sidebarcontainer {
  width: 250PX;
  /*height: 6000px;*/
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 243px;
  background-color: white;
  height: 500px;
  /*top: 1px;*/
  /*bottom: 0;*/
  /*position: absolute;*/
}

.mainpage {
  width: calc(100% - 250px);
  padding: 5px;
  padding-left: 2px;
  height: 600px;
  display: inline-block;
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #031003;
}


/***************end of pagelayout******************/

.card {
  width: 250px;
  /*height: 400px;*/
  align-self: flex-start;
  margin: 10px;
  display: inline-block;
}

.image {
  width: 200px;
  margin: 0 auto;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
}

Answer 1

Flex容器的初始设置为align-items: stretch。这意味着弹性项目将扩展以覆盖横轴的长度。

在flex-direction: row的弹性容器中，横轴是高度。

因此，如果您希望侧边栏占据父级的高度，请先删除align-items: flex-start。这会覆盖默认的stretch值。

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  /* align-items: flex-start; */
}

其次，由于您有嵌套元素，因此将flex项目放入Flex容器中，以便子项也获得align-items: stretch。并删除所有height值，因为它们也会覆盖stretch默认值。

最后，如果您不希望所有列都具有相同的高度 - 也许您希望一列具有内容高度 - 您可以对单个项目使用align-self: flex-start，这会覆盖align-items: stretch来自父母。有关详细信息，请参阅此处：How to disable equal height columns in Flexbox?

revised demo

＆＃13;

＆＃13;

/*******************page layout**************************/

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  /* align-items: flex-start;  */
}

.sidebarcontainer {
  width: 250PX;
  /*height: 6000px;*/
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;  /* NEW */
}

.sidebar {
  width: 243px;
  background-color: white;
  /* height: 500px; */
  /*top: 1px;*/
  /*bottom: 0;*/
  /*position: absolute;*/
}

.mainpage {
  width: calc(100% - 250px);
  padding: 5px;
  padding-left: 2px;
  height: 600px;
  display: inline-block;
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #031003;
}


/***************end of pagelayout******************/

.card {
  width: 250px;
  /*height: 400px;*/
  align-self: flex-start;
  margin: 10px;
  display: inline-block;
}

.image {
  width: 200px;
  margin: 0 auto;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="sidebarcontainer">
    <div class="innersidebarcontainer">
      <div class="sidebar">
      </div>
    </div>
  </div>
  <!--
    -->
  <div class="mainpage">
    <div class="page">
      <h1>page</h1>
    </div>
  </div>
</div>
<div class="footer"></div>

＆＃13;

＆＃13;

＆＃13;