Question

在父div（蓝色轮廓）中放置两个div（绿色和黄色）的好方法是什么，使其看起来像下面的第二张图？（第一个图是默认情况下div的堆叠方式。）

我有许多这样的蓝色div，其绿色div的高度可变（不同的文本量），黄色div总是相同的。

我希望黄色div始终位于容器的底部。 编辑：忘了提及我所有蓝色父级div的高度都应相同

我尝试将黄色div定位为position:absolute，将蓝色div定位为bottom:0，但这没有用，因为如果一个绿色div包含大量文本，它将碰到文字将与黄色div重叠；

蓝色父级div设置为position:relative

我在这里想念什么？

很抱歉，如果有新手问题，我正在进入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定义高度，以便可以进行比率分布。

在父div内定位div

3 个答案: