Alignment and stretching characteristics of three divs (one with a set height and two with uncertain heights)

Question

Alignment and stretching characteristics of three divs (one with a set height and two with uncertain heights)

Trying to find the right wording for this question was quite challenging due to the specific nature of the issue, so my apologies if it doesn't fully capture what I'm seeking.

Just to clarify, I am specifically looking for a solution that is compatible with IE10 using only pure HTML/CSS.

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

In the image above, we have 3 divs (#top, #mid, #bottom). The height of the bottom div is known, but not the heights of top and mid.

Is there a way to ensure that #top always displays its content while #mid fills the space between #top and #bottom?

Please note: It can be assumed that at all times,

(#top.height + #bottom.height) > #wrapper.height

, where #wrapper refers to the container element surrounding the 3 divs.

html css

Answer 1

Answer №1

body {
  overflow: hidden;
  margin: 0;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#header {
  border-bottom: 1px solid black;
  background: #ddd;
  font-weight: bold;
  flex-shrink: 0;
}
#content {
  overflow-y: auto;
}
#footer {
  background: #ddd;
  border-top: 1px solid black;
  flex-shrink: 0;
  height: 20px;
}

<div id="container">
  <div id="header">#top Header - Unique content here</div>
  <div id="content">#mid Content - Unique content goes here</div>
  <div id="footer">#bottom Footer - fixed height: 20px</div>
</div>

Answer 2

body {
  overflow: hidden;
  margin: 0;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#header {
  border-bottom: 1px solid black;
  background: #ddd;
  font-weight: bold;
  flex-shrink: 0;
}
#content {
  overflow-y: auto;
}
#footer {
  background: #ddd;
  border-top: 1px solid black;
  flex-shrink: 0;
  height: 20px;
}

<div id="container">
  <div id="header">#top Header - Unique content here</div>
  <div id="content">#mid Content - Unique content goes here</div>
  <div id="footer">#bottom Footer - fixed height: 20px</div>
</div>

Alignment and stretching characteristics of three divs (one with a set height and two with uncertain heights)

Answer №1

Similar questions

Trouble filling a List<WebElement> from a Table using Selenium Java

Enhancing an Image Gallery using CSS

Reducing the number of DOM manipulations for websites that heavily utilize jquery.append

Is there a way to detect when the user closes a tab or browser in HTML?

Modifying the Header Background Color

Android experiencing issues with dynamically loading Border XML

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

Ensure that the content inside the centrally aligned div is also aligned at the

Drift above a pair of elements

A single list is utilized by multiple HTML5 selects

Guide to adding a new Vue-Grid-Item with a button

Create a stylish border around an ion-card using a sleek black bar

Is it possible to insert an image as the background of a specific word within a paragraph?

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

Verify the presence of blank space with javaScript

The functionality of jquery.load() seems to be experiencing issues in Internet Explorer when attempting to load an HTML file

Hide the footer DIV in CSS by making it disappear with a height of 100%

After applying sorting, jqGrid displays an empty space below the final row

Java Library for Converting HTML to Textile Format