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

The toggle button is having issues functioning properly within a While loop

Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...

phpjquerycss

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l ...

javascriptcssangularjsng-class

Is the ng-style not displaying the background image with the interpolated value?

I have been attempting to update the background image of a div using angular ng-style. Below is the code I am working with: <div class="cover-image" ng-style="{'background-image' : 'url({{data.image}})'}"></div> However, ...

javascripthtmlcssangularjsangularjs-directive

Struggling with "Content" not being recognized in Typescript PouchDB transpilation errors?

I have been diligently working on an Ionic app for the past three months with no major issues during development or deployment to mobile devices. However, yesterday I encountered a frustrating NPM dependency problem while trying to deploy to mobile. In an ...

angulartypescriptionic-frameworknpmpouchdb

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

Check whether the username variable is blank; if it is, then refrain from navigating to page2.php

Introducing meekochat, a live chat website where users can connect with others. To get started, simply input your name on page1.php and you'll be directed to page2.php for chatting. However, I have implemented a feature in my code to ensure that if th ...

phphtml

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

Tips for toggling visibility in Angular 2

I utilized [hidden] in the following way where the value of "secondTab" is set to true. <form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal"> <div class="txt-danger">{{errorMessage}}&l ...

angularjsangulartypescript

The FormControl is currently presenting ",required(control)" within its value field

Upon loading my form, the default values in the input fields are set to: ,required(control) { return isEmptyInputValue(control.value) ? { 'required': true } : null; } The template structure of my form is as follows: <form [formG ...

angulartypescriptangular-forms

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

Can anyone help me figure out how to make a toolbar floatable when scrolling down using Material-UI? I tried setting textAlign:'center', position: 'fixed', top: 0, but it's resizing strangely when applied to the <Toolbar/>. ...

javascripthtmlreactjsmaterial-ui

Tips for positioning an element at the bottom of a flexible container with variable size

How can I ensure that the Author element in this jsfiddle is aligned properly between the card elements? I am struggling to adjust the size of the details container to match the variable sizes of other elements in the same row. The aim is to have the Auth ...

cssflexbox

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

Unnecessary PHP code will run on its own in JavaScript

Attempting to initiate a session in PHP and assign a value to a session variable within a Javascript function on a PHP/HTML page is creating an issue. The problem arises when the PHP code inside the if statement runs automatically upon loading the page, ra ...

javascriptphphtml

Navigating to a webpage using a dropdown menu selection and a button press

I'm new to Angular and wondering if it's possible to select an option from a dropdown menu and then be redirected to a specific page based on that selection <mat-label >Login As</mat-label> <mat-select> ...

htmlangularangular-material

Angular FormControl is a built-in class that belongs to the Angular forms module. It

I’ve been working on adjusting tslint for the proper return type, and here’s what I have so far: get formControls(): any { return this.form.controls; } However, I encountered an error stating Type declaration of 'any' loses type-safet ...

angulartypescript

Can anyone provide guidance on setting up systemjs to identify an app path specific to the environment?

I recently developed a web application using Angular and angular-cli. It works perfectly fine when running it with ng serve. Now, I have the task of deploying it on Tomcat. The catch is that it needs to be accessible through a different path because my We ...

angulartomcatangular-clisystemjs

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

javascripthtmlhtml-table

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION] Is there a way to make the Menu List disappear when zooming in on a webpage? For example: <-- Normal Page [No Zoom] --> [Logo] Profile Gallery Guestbook <-- Zoom In 120% --> [Logo] Profile Guestbook <-- Zoom In 150% --> ...

javascriptjqueryhtmlcssajax

Using currency symbols in Angular 2

I'm currently in Australia and trying to display some currency values. I have the following code: {{ portfolio.currentValue | currency : 'AUD' : true : '4.0' }} However, the result I am getting is A$1,300,000. Is there a way to c ...

angularpipecurrency

how to use beautifulsoup to insert a new tag within a text block

When a browser encounters the text www.domain.com or http://domain.com/etc/ within an HTML text section, it automatically converts it into <a href="http://www.domain.com">www.domain.com</a> or <a href="http://domain.com/etc/">http://domai ...

pythonhtmlbeautifulsoup