在 parent div 中定位 divs

Question

在 parent div（蓝色轮廓）内放置两个 div（绿色和黄色）的好方法是什么，这样它看起来就像第二张图以下？（第一张图是 divs 的默认堆叠方式）。

我有很多这样的蓝色 divs，它们的绿色 divs 高度可变（不同的文本量），黄色 divs 总是相同的。

我希望黄色 div 始终位于容器底部。 编辑：忘了说我所有的蓝色 parent div 高度应该相同

我尝试将黄色 divs 定位为 position:absolute 与 bottom:0 并将蓝色 divs 定位为 position:relative 但这不起作用，因为如果其中一个绿色 div 包含大量文本，它将运行插入其中，并且文本将与黄色 div;

重叠

蓝色parentdiv设置为height:100%

我在这里错过了什么？

抱歉，如果是新手问题，我刚刚进入 CSS 和 UI 设计。

Answer 1

您可以使用 flexbox 属性。我只是为片段目的设置高度。您可以根据自己的喜好更改高度并查看文字。

.parent {
  display: flex; /* Activate Flexbox container */
  flex-direction: column; /* To set the main axis in block direction */
  justify-content: space-between; /* Align them distributed equally from first to last */
  height: 150px;
  width: 200px;
  border: 5px solid #00A2E8;
}

.child1 {
  background: green;
  height: 25%;
}

.child2 {
  background: yellow;
  height: 25%;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Answer 2

假设黄色 div 是固定高度，这很容易

.parent {
  /*Children will be positioned relative to this*/
  position: relative;
  /*Allow to be > 100% if content requies it*/
  /*154 = height of yellow div + border*/
  min-height: calc(100vh - 154px);
  /*Height of yellow div*/
  padding-bottom: 150px;
  border: 2px solid blue;
  /*The following is purely for demo purposes*/
  width: 25%;
  display: inline-block;
  vertical-align: top;
}


/*The Green div is pretty standard*/

.green {
  background-color: green;
  color: white;
}

.yellow {
  background-color: yellow;
  /*Fixed height*/
  height: 150px;
  /*Set to postion absolute - relative to parent*/
  position: absolute;
  /*Set bottom to bottom of parent*/
  bottom: 0;
  /*Giv it a width*/
  width: 100%
}


/*Tweak margins for first and last paragrpahs*/

.green p:first-of-type {
  margin-top: 0;
}

.green p:last-of-type {
  margin-bottom: 0;
}

body {
  margin: 0
}

<div class="parent">
  <div class="green">
    <p>Some text</p>
  </div>
  <div class="yellow">
   
  </div>
</div>

<div class="parent">
  <div class="green">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi.
    </p>
  </div>
  <div class="yellow">

  </div>
</div>

<div class="parent">
  <div class="green">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nibh justo, tincidunt sed elementum id, dictum quis nunc. Pellentesque et sodales mi. Mauris luctus leo ac eros tempor, quis gravida leo pellentesque. Etiam odio nisl, lobortis ut elit
      ut, mollis eleifend ex. Etiam et risus at diam iaculis sagittis. Pellentesque porttitor odio suscipit, fringilla odio et, laoreet lectus. Nunc tincidunt ultrices condimentum. Nulla sit amet ante posuere, convallis justo vitae, facilisis orci. In
      congue egestas diam vitae fermentum. Vivamus efficitur ligula sed tincidunt blandit. Etiam feugiat egestas sem ut pellentesque. Nulla ac dui bibendum, finibus mi vitae, suscipit quam.
    </p>
    <p>
      Etiam pellentesque, diam eget condimentum rutrum, odio orci ultrices eros, in tincidunt magna tortor id augue. Nunc vitae dolor a risus egestas hendrerit a et augue. Pellentesque rhoncus lacus elit, at laoreet dolor pretium condimentum. Sed egestas placerat
      ante, in convallis arcu facilisis id. Sed nec rutrum velit. Fusce eget sem turpis. Nulla facilisi. Nam suscipit ante leo, non viverra mauris ultrices id. Donec dui ligula, aliquet sed risus vitae, mollis posuere est. Aenean elementum, libero quis
      fermentum dictum, sem lacus volutpat orci, quis rutrum ante odio eleifend risus. Nullam placerat et lacus in sagittis. Suspendisse potenti. Maecenas ullamcorper cursus ligula sit amet ullamcorper.
    </p>
  </div>
  <div class="yellow">

  </div>
</div>

Answer 3

如果你使用 flex 这将非常简单 -:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 500px;
  border: 2px solid blue;
}

.green {
  flex: 1;
  width: 100%;
  background: green;
}

.white {
  flex: 1;
  width: 100%;
  background: white;
}

.yellow {
  flex: 1;
  width: 100%;
  background: blue;
}

<div class="container">
  <div class="green"></div>
  <div class="white"></div>
  <div class="yellow"></div>
</div>

在这种情况下，我们为所有 div 给出了 flex: 1，因此比率在所有 3 个 div 中是 1:1:1.
如果将 flex 的值设为 1,2,1 则比率将为 1:2:1即容器总高度的25%、50%、25%。

我们还需要为外部定义高度 div 以便可以发生比例分布。

在 parent div 中定位 divs

Positioning divs inside a parent div

css

css-position