What is the best way to control the heights of multiple divs when each div's height is influenced by the others?

https://stackblitz.com/edit/angular-z32zec demonstrates a unique layout challenge. The container's height adjusts to the screen, with the header always at the top and its height variable. The bottom section remains fixed in position and size. The content area's height is dependent on the header, sometimes leaving empty space if overall height is less than the screen. Any solutions or suggestions for achieving this dynamic layout?

Answer №1

After reviewing your stackblitz demo, it seems that this is the layout you are looking for (please confirm if it's correct): Stackbliz demo

<div class="container">

    <div class="header">
        The height of this header section is variable and may need adjustments.
    </div>

    <div class="content">
        The height of this content section is dependent on the height of the 'header' section. It might be empty if the combined heights
        of all three sections are smaller than the screen height. When the height of the header section increases, the height of this
        section decreases.
    </div>

    <div class="bottom-div">
        This section always stays at bottom of the container, which itself has a height equal to the screen height. The height 
        of this bottom area remains constant.
    </div>

</div>

.container {
  display: flex;
  flex-direction:column;

  &>* {
    flex-shrink: 0;
  }

  border: 1px solid red;
  height: 100vh;
}


.header {
  margin: 5px;
  border: 1px solid black;
}

.content {
  flex: 1;
  margin: 10px;
  border: 1px solid black;
}

.bottom-div {
  margin: 10px;
  border: 1px solid gray;
}

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

Obtain a collection of hexadecimal color codes within an unordered list (<ul>) by using AJAX to fetch data from

I have a div containing various product options, each with a different color swatch: <div class="productOptionPickListSwatch"> <ul> <li class="swatch hasPreview swatchOneColour"> <label for="e3385b72a9a0c62514e ...

Refreshing all parts of a webpage except for a single div

Currently, I am in the process of creating a simple web page that includes a small music player (niftyPlayer). The individuals I am developing this for request that the player be located in the footer and continue playing when users navigate to different s ...

Setting a specific width for columns when utilizing more than 12 columns in a row in Bootstrap 3

Utilizing bootstrap 3 in this particular case. I currently have an HTML table with more than 12 rows, about 14 in total. These rows consist of various input controls such as textboxes and dropdowns. My goal is to set a fixed width for each column, for exa ...

Tips for managing your time while anticipating an observable that may or may not

I am facing a dilemma in my Angular app where I need to conditionally make an HTTP call to check for the existence of a user. Depending on the result of this call, I may need to either proceed with another API request or halt the processing altogether. I ...

Executing Angular within a Virtual Directory on IIS

My query pertains to Angular2+ (not AngularJS) We are facing an issue while trying to host our Angular site under a virtual directory within a website on IIS. The specific setup involves a Website named Development located at: C:\inetpub\wwwroo ...

Arrangement of div elements tailored to fit the size of the viewport

I am working on creating a grid of divs that will cover the entire viewport. To start, I want to have a grid that is 7 divs wide and 10 divs high. Below is the code snippet I've written so far to set the size of the div elements: function adjustHeig ...

Transforming res.json() into an Array of Objects

I am dealing with a Java webservice that outputs a list of Json objects with specific properties: public class Oferta { private int id; private String categoria; private String descricao_oferta; private String anunciante; private double valor; private boo ...

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated. 100px +-------------------------+ +------------+ | | | | | ...

Incorporating an additional stylesheet in Joomla

I recently created a Joomla website that heavily relies on the background image for its design. As such, I need to ensure there is an image available for every screen resolution. I've heard there's a simple solution for this, like adding a <l ...

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

Set the position to fixed so it doesn't scroll

Is there a way to create a fixed position div that remains in place when the user scrolls, similar to the effect shown in this example image? Position Absolute: https://i.sstatic.net/4RAcc.png Position Fixed (desired effect): https://i.sstatic.net/3DIna. ...

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

The document encountered an XMLHttpRequest error during the update process despite having CORS properly enabled

Encountering CORS errors when attempting to update a record: Cross origin requests are only supported for HTTP. XMLHttpRequest cannot load localhost:3000/api/adverts/5bf2b76c38c88dd144e5d4c3 due to access control checks. In create.component.ts: Handlin ...

Tips on setting background color for ODD and EVEN rows using PHP?

I am looking to incorporate background colors for alternating rows, with odd rows being #e5e8e8 and even rows being #b9b8bb, using CSS. for ($i = 2; $i <= $arrayCount; $i++) { $_SESSION["a"] = trim($allDataInSheet[$i]["A"]); $_SESSION[ ...

javascript jquery chosen not functioning properly

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <h1 id="hey">List King</h1> <div class="Select-DB"> <select id="DB" class="chosen ...

Is there a way to centralize the storage of node_modules in a shared directory for utilization in Angular projects?

Is it possible to store node_modules in a shared folder instead of the local repository folder (node_modules) and then use this shared folder in an Angular project? I will demonstrate my requirements through a flowchart: https://i.sstatic.net/0QSxU.png W ...

Is there a way to prevent my navbar from breaking buttons on mobile devices?

I am a beginner working on my practice portfolio and I have decided to make it fully responsive using flexbox as much as possible. I am following a "mobile-first" approach, so I can address any design issues for desktop later on. One problem I am facing is ...

Verify whether the current location is within the circle

I am conducting a test to determine if my current location falls within a given radius of 300m. If it does, return true; otherwise return false. Below is the code I am currently using: <body> <button onclick="getLocation()"> ...

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...