我想知道如何根据 div 上的内容调整 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