How to set div height to equal it div height? - html

Question

I would like to know how can I adjust the height of a div depending of the content on it. For example, I have the following 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>
However, when I launch my application, what I get is this:
I want that the height of the "Pantalla" div equals the total height of the divs that it has. How can I achieve this?
UPDATED: When the code is like this, what I get is the following:
enter image description here

Answer 1

The reason why the background only cover to the first div is that you're missing the display rule.
Please add display: flex; and flex-direction:column, then you will see it's working.
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

As I can see that you have a main div and two child div inside that main div element
and you want that the background image of must cover both div.
if I am right then change the height of your main element
height: 100vh;
change your css code like below and see what happend
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

If what you want is the image that occupies all the space that its parent has, try this:
I suppose that the div.Pantalla's parent is a div with id: app.
#app {
position: relative;
width: 100%;
height: auto;
}
div.Pantalla {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}