Adjust the size of the inner div to fit within its container based on the changing height of the footer positioned

Question

Adjust the size of the inner div to fit within its container based on the changing height of the footer positioned

I have a unique layout challenge with two stacked divs inside a container div. The container div has height: 100%, and the bottom inner-div has a dynamic height that changes based on its content. My goal is to make the top div take up the remaining space in the container, so that the bottom div appears fixed at the bottom of the viewport.

<div class="container" style="height: 100%">
  <div class="my-height-should-be-the-remainder-of-the-container" style="overflow: scroll">
    <p>My content should be able to scroll if there's too much to display</p>
  </div>

  <div class="my-height-should-take-priority-over-the-top-div">
    <p>The height of this div should adjust dynamically based on its content</p>
    <p>As such, the content should not overflow outside the div</p>
  </div>
</div>

I've attempted using display: table with the inner divs set as display: table-row, but I'm struggling to make the top div respect the overflow: scroll; it ends up pushing the bottom div out of view.

While I'm aware that I could use position: fixed on the bottom div and adjust the padding-bottom of the top div dynamically with JavaScript, I am hoping to find a CSS-only solution, preferably one that doesn't involve flexbox.

Any suggestions or help would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

If you want to create a scrolling effect for content within an absolutely positioned div without affecting the layout of other elements, you can do so by wrapping the content in a div with overflow:auto property.

For example:

body, html{
  margin:0;
  padding:0;
}
div{
  box-sizing:border-box;
}
.container{
  height:100vh;
  width:100vw;
  display:table;
  border-collapse:collapse;
}
.tr{
  display:table-row;
}
.td{
  display:table-cell;
  height:100%;
}
.header{
  height:100%;
  border:1px solid green;

}
.wrapper{
  height:100%;
  position:relative;
  overflow:auto;
  min-height:45px;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.footer{
  border:1px solid blue;
}

<div class="container">
  <div class="tr header">
    <div class='td'>
      <div class="wrapper">
        <div class="content">
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tr footer">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

Fiddle: https://jsfiddle.net/trex005/j7m3yLp7/1/

More details :

Answer 2

If you want to create a scrolling effect for content within an absolutely positioned div without affecting the layout of other elements, you can do so by wrapping the content in a div with overflow:auto property.

For example:

body, html{
  margin:0;
  padding:0;
}
div{
  box-sizing:border-box;
}
.container{
  height:100vh;
  width:100vw;
  display:table;
  border-collapse:collapse;
}
.tr{
  display:table-row;
}
.td{
  display:table-cell;
  height:100%;
}
.header{
  height:100%;
  border:1px solid green;

}
.wrapper{
  height:100%;
  position:relative;
  overflow:auto;
  min-height:45px;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.footer{
  border:1px solid blue;
}

<div class="container">
  <div class="tr header">
    <div class='td'>
      <div class="wrapper">
        <div class="content">
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tr footer">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

Fiddle: https://jsfiddle.net/trex005/j7m3yLp7/1/

More details :

Answer 3

Answer №2

Although you mentioned a preference against using flexbox, here is an example of how the layout could be achieved if that restriction were lifted:

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}
#container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
#top {
  background: lightblue;
  flex: 1;
  overflow: auto;
}
#bottom {
  background: lightgreen;
}

<div id="container">
  <div id="top">
    This is the top.
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div id="bottom">
    This is the bottom
  </div>
</div>

Answer 4

Although you mentioned a preference against using flexbox, here is an example of how the layout could be achieved if that restriction were lifted:

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}
#container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
#top {
  background: lightblue;
  flex: 1;
  overflow: auto;
}
#bottom {
  background: lightgreen;
}

<div id="container">
  <div id="top">
    This is the top.
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div id="bottom">
    This is the bottom
  </div>
</div>

Answer 5

Answer №3

Unsure if this is what you are looking for. The top div will have a maximum height of 200px.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.top {
    height: 20%;
    background-color: red;
    max-height: 200px;
}

.bottom {
    background-color: green;
    height: 80%;
}
</style>
</head>
<body>
<div class="container" style="height: 100%;background-color: yellow;">
  <div class="top" style="overflow: scroll;">
    <p>If my size decreases, the content within me should be scrollable</p>
  </div>

  <div class="bottom">
    <p>My height should adjust according to the content inside me</p>
    <p>This means that overflow of content should not occur</p>
  </div>
</div>

</body>
</html>

Answer 6

Unsure if this is what you are looking for. The top div will have a maximum height of 200px.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.top {
    height: 20%;
    background-color: red;
    max-height: 200px;
}

.bottom {
    background-color: green;
    height: 80%;
}
</style>
</head>
<body>
<div class="container" style="height: 100%;background-color: yellow;">
  <div class="top" style="overflow: scroll;">
    <p>If my size decreases, the content within me should be scrollable</p>
  </div>

  <div class="bottom">
    <p>My height should adjust according to the content inside me</p>
    <p>This means that overflow of content should not occur</p>
  </div>
</div>

</body>
</html>

Adjust the size of the inner div to fit within its container based on the changing height of the footer positioned

Answer №1

Answer №2

Answer №3

Similar questions

Hiding a button based on the visibility of another button in the user's viewport

Incorporating a File Attachment within a JSON Structure

Acquiring data from a website using Python post user engagement

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

Animation will cease once the page is refreshed via Ajax

How about mixing up your backgrounds with an overlay effect for a unique look?

Is it possible to conceal a link once it has been visited?

Require the capability to bypass inline CSS styling

JavaScript is throwing an error when clicking on functions and managing the z-index property

Sending you to a new page and popping up an alert

I am experiencing difficulty with the color of my progress bar in Firefox

The design of iOS7 Safari becomes distorted when the orientation changes and an input field is in focus

What is the method for using Selenium in Python to locate elements based on CSS selectors on a webpage?

I am having trouble assigning the correct z-index to either the id or class of the Facebook message icon, which is appearing behind the menu

Stylish grey container with crisp white lettering

Is it possible to customize the CSS styles of a jQuery UI modal dialog box?

jQuery failing to append code after being removed

Ways to retrieve the text of the chosen radio button label with the help of jQuery

Add a CSS class to the text that is selected within a Content Editable div

The XPath for pagination is incorrect