Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

Question

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below:

https://i.sstatic.net/Q7sTI.png

Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I encountered difficulties and failed. I am curious to know if this is a feasible task.

My current approach involves div elements, although it could be implemented with other HTML elements such as tables.

<div id="parent">
  <div id="one">
   Some dynamic content
  </div>
  <div id="two">
    Should take up the remaining height
  </div>
  <div id="three">
    Some dynamic content
  </div>
</div>

For reference, here is a JSFiddle demonstrating the initial setup.

Thank you for any assistance provided.

css position height

Answer 1

Answer №1

Hey there! Absolutely, you can utilize flex for this task. It's quite straightforward - just set the container to display:flex, then designate which of the container children should grow and which shouldn't by using the flex-grow attribute.

#parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

Take a look at the updated fiddle here: https://jsfiddle.net/ypzd68wv/3/

PS: Remember to double check your minimum browser support requirements ;) http://caniuse.com/#feat=flexbox

Answer 2

Hey there! Absolutely, you can utilize flex for this task. It's quite straightforward - just set the container to display:flex, then designate which of the container children should grow and which shouldn't by using the flex-grow attribute.

#parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

Take a look at the updated fiddle here: https://jsfiddle.net/ypzd68wv/3/

PS: Remember to double check your minimum browser support requirements ;) http://caniuse.com/#feat=flexbox

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

Answer №1

Similar questions

CSS background image not displaying in ReactJS with SCSS

What is the best way to make sure my navigation menu adapts to changes in my div size

Styling CSS for disabled nested elements

Divs should be of consistent and adjustable height

Mastering the art of combining images and text harmoniously

Choose all stylus/css imports except for those with a specific ending

What is the best way to toggle the visibility of my menu using JavaScript?

Can CSS3 be utilized to craft this specific shape?

Position the text so that it is aligned below and to the right of the text box

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

Message displayed on picture carousel

What steps are necessary to alter the background color of a jumbotron?

What is the best way to achieve a transparent background for an element?

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

Creating a visual feast: A guide to crafting a stunning image gallery

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

Unable to select the initial element

The Vue.js modal is unable to resize below the width of its containing element

What are the steps for editing and preserving a logo with an 8-bit indexed color palette?