如何设置 div 高度等于它的 div 高度？

Question

我想知道如何根据内容调整 div 的高度。例如，我有以下 HTML：

div.Pantalla {
  background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
  flex-direction:column;
}

.formulario{
  position: relative;
  width:80%;
  margin:auto;
}

form{
  margin-top: 10px;
  display: block;
  width:100%;
  padding:16px;
  border: 1px solid black;
  border-radius:5px;
  background: deepskyblue;
}


.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  width: 10%;
  text-align: center;
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #0095dd;
  background-size: cover;
  color: white;
}

.form-inline button:hover {
  background-color:lightblue;
}


ul{
  width:100%;
  padding:16px;
  border: 2px solid black;
  border-radius:5px;
  background: deepskyblue;
  margin-top: 10px;
}

li{
  position: center;
  width:100%;
}

.column {
  float: left;
  margin-top: 20px;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  position: relative;
}

.column button{
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 10px;
  width: 80%;
  text-align: center;
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #0095dd;
  background-size: cover;
  color: white;
}

.column button:hover {
  background-color:lightblue;
}

<div class="Pantalla">

<div class="formulario">
  <form class="form-inline" [formGroup]="SearchForm">
    <input type="text" id="Origin"  placeholder="Enter Origin" formControlName="Origin">
    <input type="text" id="Destiny" placeholder="Enter Destination" formControlName="Destiny">
    <input type="date" id="CheckIn" placeholder="Enter Check-In Date" formControlName="CheckIn">
    <input type="date" id="Checkout" placeholder="Enter Check-Out Date" formControlName="Checkout">
    <input type="number" id="people" placeholder="Enter Number of People" formControlName="people">
    <button type="submit" (click)="getPacks()">Go!</button>
  </form>
</div>

<div class="column menu">
     <ul class="list-group" *ngFor="let pack of packs; let i = index">
       <li class="list-group-item">Flight {{pack.flight.Airline}}, {{pack.flight.LandMarkName_Origin}} - {{pack.flight.LandMarkName_Destination}} for {{pack.flight.minPrice}} Dolars </li>
       <li class="list-group-item">Stay at {{pack.hotel.name}}, with {{pack.hotel.Star_rating}} / {{pack.hotel.scale}} Stars</li>
       <li class="list-group-item">Visit
         <p *ngFor="let places of pack.places; let j = index">{{places.name}}, </p>
       </li>
       <button>Get it!</button>
     </ul>
</div>

</div>

但是，当我启动我的应用程序时，我得到的是this：

我希望“Pantalla”div 的高度等于它所拥有的 div 的总高度。我怎样才能做到这一点？

更新：当代码是这样的时候，我得到的是以下内容： enter image description here

Answer 1

背景只覆盖到第一个div的原因是你缺少显示规则。

请添加display: flex; 和flex-direction:column，然后你会看到它正在工作。

div.Pantalla {
  background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: auto;
  /* Add this */
  display: flex;
  flex-direction: column;
}

.formulario{
  position: relative;
  width:80%;
  margin:auto;
}

form{
  margin-top: 10px;
  display: block;
  width:100%;
  padding:16px;
  border: 1px solid black;
  border-radius:5px;
  background: deepskyblue;
}


.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  width: 10%;
  text-align: center;
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #0095dd;
  background-size: cover;
  color: white;
}

.form-inline button:hover {
  background-color:lightblue;
}


ul{
  width:100%;
  padding:16px;
  border: 2px solid black;
  border-radius:5px;
  background: deepskyblue;
  margin-top: 10px;
}

li{
  position: center;
  width:100%;
}

.column {
  float: left;
  margin-top: 20px;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  position: relative;
}

.column button{
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 10px;
  width: 80%;
  text-align: center;
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #0095dd;
  background-size: cover;
  color: white;
}

.column button:hover {
  background-color:lightblue;
}

<div class="Pantalla">

<div class="formulario">
  <form class="form-inline" [formGroup]="SearchForm">
    <input type="text" id="Origin"  placeholder="Enter Origin" formControlName="Origin">
    <input type="text" id="Destiny" placeholder="Enter Destination" formControlName="Destiny">
    <input type="date" id="CheckIn" placeholder="Enter Check-In Date" formControlName="CheckIn">
    <input type="date" id="Checkout" placeholder="Enter Check-Out Date" formControlName="Checkout">
    <input type="number" id="people" placeholder="Enter Number of People" formControlName="people">
    <button type="submit" (click)="getPacks()">Go!</button>
  </form>
</div>

<div class="column menu">
     <ul class="list-group" *ngFor="let pack of packs; let i = index">
       <li class="list-group-item">Flight {{pack.flight.Airline}}, {{pack.flight.LandMarkName_Origin}} - {{pack.flight.LandMarkName_Destination}} for {{pack.flight.minPrice}} Dolars </li>
       <li class="list-group-item">Stay at {{pack.hotel.name}}, with {{pack.hotel.Star_rating}} / {{pack.hotel.scale}} Stars</li>
       <li class="list-group-item">Visit
         <p *ngFor="let places of pack.places; let j = index">{{places.name}}, </p>
       </li>
       <button>Get it!</button>
     </ul>
</div>

</div>

Answer 2

正如我所见，主 div 元素中有一个主 div 和两个子 div 并且您希望的背景图像必须覆盖两个 div。 如果我是对的，那么改变你的主要元素的高度

height: 100vh;

像下面这样更改你的 css 代码，看看发生了什么

div.Pantalla {
  background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Answer 3

如果您想要的是占据其父级所有空间的图像，请尝试以下操作： 我想 div.Pantalla 的父级是一个 id: app 的 div。

#app {
  position: relative;
  width: 100%;
  height: auto;
 }
div.Pantalla {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

}