Three Divs stacked on top of each other, with varying heights based on

Question

Three Divs stacked on top of each other, with varying heights based on

I am seeking a solution for creating a layout with three vertically stacked divs.

The top div must have a fixed height of 60px.

The middle div might contain content exceeding its height, therefore we've set it to overflow: auto. But regardless of the content, it should take up the remaining height of the window minus the height of the top and bottom divs.

The bottom div must have a minimum height of 40px and can expand both upward and downward depending on user input, ranging from 40px to 400px. Once it reaches its maximum height, it should start scrolling.

Visualizing the structure:

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|          ^|
|  Footer  ||
|          v|
+-----------+

I am encountering an issue where the middle div doesn't shrink as the bottom div expands. I am looking for a solution that does not involve JavaScript, if feasible.

javascript jquery html css

Answer 1

Answer №1

Discover the power of Flexbox in combination with max-height.

Answer 2

Discover the power of Flexbox in combination with max-height.

Answer 3

Answer №2

*Check out the updated fiddle below

extra footer Styling:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 500px;
  background: #f0f0f0;
}

Does this meet your requirements?

UPDATE:

REVISED FIDDLE

Answer 4

*Check out the updated fiddle below

extra footer Styling:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 500px;
  background: #f0f0f0;
}

Does this meet your requirements?

UPDATE:

REVISED FIDDLE

Answer 5

Answer №3

I have experience implementing a similar feature for a messaging application in the past. Although I don't have the exact code on hand, this is the general concept I followed. I made some design enhancements and input functionality to demonstrate how it could work.

While the middle section doesn't technically shrink, it does visually appear smaller as the footer expands and overlaps the middle block.

var inputBox = document.getElementsByClassName("footer")[0];
var contentBox = document.getElementsByClassName("content")[0];

inputBox.addEventListener('keydown', function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        createMessage(inputBox.textContent);
        inputBox.textContent = "";
    }
}, false);

function createMessage (str) {
     var message = document.createElement('div');
     message.style.cssText = "background: #3AF; padding: 10px; border-radius: 5px; margin: 10px 0; color: white;";
     message.textContent = str;
     contentBox.appendChild(message);
}

createMessage("Sent messages appear here!")
createMessage("Type a message in the footer and press enter to send")
createMessage("This list will become scrollable if there is enough content")
createMessage("The text entry will also dynamically resize as you type")

/* border box reset, as per http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*
  base container class, height can be relative or absolute (but it must have height
  requires position relative or absolute so we can position the header and footer
  finally requires vertical padding the same height as the the header/footer
*/

.container {
  height: 600px;
  background-color: rgb(220, 220, 220);
  position: relative;
  padding: 50px 0;
}
/*
  header class, must have a height and width
  should be top 0 and left 0 so that it positions inside the containers padding
  must be positioned absolute
*/

.container .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(120, 120, 120);
  text-align: center;
  line-height: 30px;
  padding: 10px;
  color: white;
  font-size: 22px;
}
/*
  content box, the easiest really
  height to 100% (so it will be the container minus the padding, which the header/footer sits in)
  overflow-y: auto; so if we exceed the size of the content box we scroll instead
*/

.container .content {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}
/*
  positioned absolutely again, but bottom left this time.
  use min height to specify the basic height then as the user types it will grow accordingly
  set max-height to prevent it growing too tall, overflow: auto; again so we can scroll in that situation
  VERY IMPORTANTLY MUST HAVE THE CONTENT EDITABLE FLAG ON THE HTML ELEMENT
*/

.container .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 50px;
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  background-color: rgb(120, 120, 120);
  padding: 15px;
  line-height: 20px;
  color: white;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="content"></div>
  <div class="footer" contenteditable></div>
</div>

The JS section included here is just for demonstration purposes and not essential for the functionality. It adds an event listener for the "enter" key to create a new message in the content box. The layout is primarily controlled through CSS.

Answer 6

I have experience implementing a similar feature for a messaging application in the past. Although I don't have the exact code on hand, this is the general concept I followed. I made some design enhancements and input functionality to demonstrate how it could work.

While the middle section doesn't technically shrink, it does visually appear smaller as the footer expands and overlaps the middle block.

var inputBox = document.getElementsByClassName("footer")[0];
var contentBox = document.getElementsByClassName("content")[0];

inputBox.addEventListener('keydown', function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        createMessage(inputBox.textContent);
        inputBox.textContent = "";
    }
}, false);

function createMessage (str) {
     var message = document.createElement('div');
     message.style.cssText = "background: #3AF; padding: 10px; border-radius: 5px; margin: 10px 0; color: white;";
     message.textContent = str;
     contentBox.appendChild(message);
}

createMessage("Sent messages appear here!")
createMessage("Type a message in the footer and press enter to send")
createMessage("This list will become scrollable if there is enough content")
createMessage("The text entry will also dynamically resize as you type")

/* border box reset, as per http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*
  base container class, height can be relative or absolute (but it must have height
  requires position relative or absolute so we can position the header and footer
  finally requires vertical padding the same height as the the header/footer
*/

.container {
  height: 600px;
  background-color: rgb(220, 220, 220);
  position: relative;
  padding: 50px 0;
}
/*
  header class, must have a height and width
  should be top 0 and left 0 so that it positions inside the containers padding
  must be positioned absolute
*/

.container .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(120, 120, 120);
  text-align: center;
  line-height: 30px;
  padding: 10px;
  color: white;
  font-size: 22px;
}
/*
  content box, the easiest really
  height to 100% (so it will be the container minus the padding, which the header/footer sits in)
  overflow-y: auto; so if we exceed the size of the content box we scroll instead
*/

.container .content {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}
/*
  positioned absolutely again, but bottom left this time.
  use min height to specify the basic height then as the user types it will grow accordingly
  set max-height to prevent it growing too tall, overflow: auto; again so we can scroll in that situation
  VERY IMPORTANTLY MUST HAVE THE CONTENT EDITABLE FLAG ON THE HTML ELEMENT
*/

.container .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 50px;
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  background-color: rgb(120, 120, 120);
  padding: 15px;
  line-height: 20px;
  color: white;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="content"></div>
  <div class="footer" contenteditable></div>
</div>

The JS section included here is just for demonstration purposes and not essential for the functionality. It adds an event listener for the "enter" key to create a new message in the content box. The layout is primarily controlled through CSS.

Three Divs stacked on top of each other, with varying heights based on

Answer №1

Answer №2

Answer №3

Similar questions

Using React with Typescript to display components generated from the `map` function

I'm encountering a Type Error message in VS Code terminal stating that converting data to string is not a function. Can someone please help me understand this type error? I am new to Node.js and

Hiding timestamps on an interactive transcript: A step-by-step guide

The margin property in jQuery does not seem to be functioning properly when trying to send

Bootstrap link causing alterations to my CSS code

Sharing the latest updates on fyneworks' star rating information

"Unraveling the Mystery: In Javascript Vue, what is the secret behind the origin of the variable 'e' found in the function

Tips for extracting an unfamiliar URL from a string

Implementing conditional statements in Puppeteer web scraping

Phalcon PHP encountered issues with CSRF token validation during AJAX requests

What is causing this to function properly on Firefox but not on Chrome or IE?

Vue routing stops working when there is no hash in the URL (no designated input file)

Displaying the currently logged in user's name with NodeJS/ExpressJS/Passport

We were unable to load the resource because the server returned a 404 (Not Found) error. The EnterpriseMaster/BindNatureofAssignment feature is not functioning properly after being published

Execute a jQuery function upon the selection of a browser's auto-suggested option

Selecting a value will cause other blocks to vanish

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

The JSP page is not showing the table content

A solution for accessing computed properties within a v-for loop

sum inside the while loop