Question

如何将黄色背景的div拉伸至全高？它应该掩盖绿色，但它不起作用。我尝试在其上添加height: 100%但是它会从搜索栏中添加高度？

＆＃13;

.block {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  height: 600px;
  width: 25%; 
  background: red;
}

.home {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 75%;
  background: green;
}

.search-bar {
  width: 100%;
  padding: 25px;
  background: blue;
}

.content-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-stretch;
}

.content,
.single {
  width: 50%;
  background: yellow;
}

＆＃13;

<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

首先你应该添加一个样式重置，我现在正在使用* {}，如下所示。这里的诀窍是在flex-direction: column;上运行.home，您可以在.content-wrap

搜索后告诉flex-grow: 1;占用该空间的其余部分

box-sizing: border-box;是，如果您将width: 200px;添加到元素并添加padding: 20px;，则元素将保留200px并包含填充。如果你没有，它将需要200px + 40px。

如果你想要小提琴，here it is

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.block {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  height: 600px;
  width: 25%; 
  background: red;
}

.home {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 75%;
  background: green;
}

.search-bar {
  width: 100%;
  padding: 25px;
  background: blue;
}

.content-wrap {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-stretch;
}

.content,
.single {
  width: 50%;
  background: yellow;
}

＆＃13;

<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

flex-direction: column;是你的朋友。以下是您的代码的重复小提示：https://jsfiddle.net/vsjktmms/1/

使用您提供的相同HTML结构：

.block {
  display: flex;
  width: 80%; 
  margin: 0 auto;
  background-color: gray;
  align-items: stretch;
}

.sidebar {
  width: 25%;
  height: 600px;
  background-color: red;
}

.home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 75%;
  background-color: green;
}

.search-bar {
  padding: 25px;
  background-color: blue;
}

.content-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: pink;
}

.content,
.single {
  width: 50%;
  background: yellow;
}

Answer 3

正如其他答案所述，这里有一个主要问题：

flex-direction: column;，我添加到home，以启用flex属性而不是height，以使.content-wrap填充home中剩余的可用空间1}}

这将使.search-bar和.content-wrap堆栈垂直，并允许在flex: 1上使用.content-wrap，这将使其填充剩余的空间/高度。< / p>

所以，即使你已经得到答案，并且由于某些属性值不正确或者不需要，我决定发布一个答案来澄清所做的更改。

请参阅我在CSS中做出的注释，以获得进一步的说明以及我所做的更改。

Stack snippet

＆＃13;

.block {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  height: 600px;
  width: 25%; 
  background: red;
}

.home {
  display: flex;
  flex-direction:  column;      /*  added  */
  /*flex-wrap: wrap;                removed, not needed  */
  /*align-items: flex-start;        removed, items should fill parent's,
                                    in this changed case, width  */
  width: 75%;
  background: green;
}

.search-bar {
  /*width: 100%;                    not needed, default for column
                                    item is to fill parent width as
                                    its "align-items" is "stretch"  */
  padding: 25px;
  background: blue;
}

.content-wrap {
  flex: 1;                      /*  added, take the remaining space left
                                    left of its parent (height in this case)  */
  display: flex;
  flex-wrap: wrap;
  /*width: 100%;                    not needed, default for column
                                    item is to fill parent width as
                                    its "align-items" is "stretch"  */

  /*align-items: flex-stretch;      wrong value, should be "stretch",
                                    though since that is the default,
                                    it is not needed  */
}

.content,
.single {
  width: 50%;
  background: yellow;
}

＆＃13;

<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

＆＃13;

如何使用flex将div拉伸到全高度

3 个答案: