How can I make a div's height match that of another div?

I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure:

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}} Dollars </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, upon launching the application, I noticed that the height of the "Pantalla" div is not equal to the total height of its containing divs. How could I go about fixing this issue?

UPDATE: After modifying the code as required, the visual outcome now looks like this image:

htmlcssangular

Answer №1

The issue with the background only covering the first div is due to missing the display rule.

To fix this, please include display: flex; and flex-direction:column, and you will observe that it works as intended.

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}} Dollars </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

It appears that you have a main div with two child divs inside it, and you want the background image to cover both divs. To achieve this, adjust the height of your main element accordingly.

height: 100vh;

Try updating your CSS code as shown below and observe the result:

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

To achieve the desired effect of an image taking up the full space of its parent, follow these steps: Assuming that the parent of div.Pantalla is a div with the id of "app."

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

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference: HTML Code: <td> <div class="schedule-content"> <div class="timestamp& ...

htmlcss

What is the best way to incorporate a 'category filter' in Angular2?

Unique Scenario In my Angular2 application, I have implemented code in a component's view parent.component.html that iterates through an array of items and generates a new component for each item: <div class="list-items"> <!-- The colored ...

javascriptangularmasonryjquery-isotope

When enlarging or extending the container, text starts to spill out

My issue is that the text content is overflowing the designated box or container - any ideas on how to fix this problem? I have attempted to utilize max-width and max-height, but unfortunately, I am unable to get them to function as intended. Here's ...

htmlcss

Angular 2 Form Arrays

I need to create a new FormArray, but currently there is only one member in the array. When I try to create a new FormBuilder, it looks like this: public myAccountForm: FormGroup; ngOnInit() { this.myAccountForm = this._fb.group({ FullName: [ ...

angularangular-reactive-forms

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss

Issues arise when using Bootstrap-select with multiple options

Currently, I am in the process of developing a web application using Angular 6. In order to implement a customizable combo-box, I integrated the bootstrap-select library developed by Silvio Mureto into my project. However, I have encountered an issue with ...

htmltwitter-bootstrap-3angular6bootstrap-select

Is TypeScript the new replacement for Angular?

After completing a comprehensive tutorial on Angular 1.x, I decided to explore Angular 2 on angular.io. However, upon browsing the site, I noticed references to Typescript, Javascript, and Dart. This left me wondering if my knowledge of Angular 1.x is now ...

angularjsangulartypescript

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

After successfully automating the process of filling in a textbox and clicking the "proceed with booking" button using a submit() command, I encountered an issue. The HTML code does not provide a URL that can be used in the driver.get([url]) method to navi ...

pythonhtmlcssseleniumwebdriver

When the session times out in Angular 5, the previous user's credentials remain on the page instead of being replaced with the current user's information

When switching from one user to another in Angular 5, I am facing an issue where the previous user's credentials are displayed instead of the current user's until I refresh the page. I have tried using the localstorage.clear() method but it doesn ...

angular.net-coreangular5

Position pictures in the same row in a straight line

I am struggling to align a set of images properly. The screenshot below shows the current layout: My goal is to have all four images lined up in a single row, with any additional images starting on a new row. I have attempted various methods, but none ha ...

htmlcss

Showcasing a variety of product titles with the help of CSS

Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...

htmlcsslist

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

javascripthtmlangular

The object assigned in the Facebook login method cannot be utilized

I'm working on integrating Facebook login with Angular 2. Here's the button for logging in: <button ion-button (click)="fbLogin()"><ion-icon name="logo-facebook"></ion-icon>Login using Facebook</button> Below is the clic ...

angulartypescriptfacebook-login

Utilizing Angular's ngx-bootstrap date range picker for a customized date range filtering system

Currently, I am incorporating ngx-bootstrap's datepicker functionality and utilizing the date range picker. This feature allows users to choose a start and end date. After selecting these dates, my goal is to filter the array(content) based on whethe ...

angulartypescriptsortingngx-bootstrap

Challenges encountered when setting a value to a custom directive via property binding

I'm working on a question.component.html template where I render different options for a specific question. The goal is to change the background color of an option to yellow if the user selects the correct answer, and to red if they choose incorrectly ...

angularangular-directive

Aligning Text to the Right Using CSS

HTML <body> <div class="menu_items"> <h1>My Heading</h1> <nav> <a>Item 1</a> <a>Item 2</a> <a>Item 3</a ...

css

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

jqueryhtmlcss

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping. I tried solving it with margins and paddings but believe there must be a simpl ...

javascripthtmljquerycssanchor

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog