Adjust the height of a div element and enable scrolling to fit the

Question

Adjust the height of a div element and enable scrolling to fit the

There are numerous inquiries regarding this particular issue.

I have exhausted nearly all possible solutions I could find, yet none of them delivered the desired outcome.

This is the structure of my page:

<div>
   <header id="status">
     // The content within this section changes dynamically
   </header>
   <div id="summary">
     // The height of this div should adjust accordingly and enable vertical scrolling if necessary
   </div>
</div>

Currently, I am using the following script to achieve this, but encountering issues when attempting to scroll to the bottom with lengthy text in the header.

<script>
$(document).ready(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

$(window).resize(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

Attempts with 'min-height' and 'max-height' did not yield any positive results.

If anyone can provide assistance, it would be greatly appreciated as I have been struggling with this issue for over a month. Previously, setting a fixed height was effective, but due to the changing header height, that method no longer works.

javascript jquery html css height

Answer 1

Answer №1

I would recommend utilizing the flexbox feature for your layout.

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
   </div>
</div>

Note: For compatibility with older browsers like IE8/9, you can provide a fallback solution by commenting out the display: flex; line in the CSS code snippet above.

html, body {
  margin: 0;
}
.wrapper {
  /*display: flex;*/
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 
2 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
   </div>
</div>

Answer 2

I would recommend utilizing the flexbox feature for your layout.

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
   </div>
</div>

Note: For compatibility with older browsers like IE8/9, you can provide a fallback solution by commenting out the display: flex; line in the CSS code snippet above.

html, body {
  margin: 0;
}
.wrapper {
  /*display: flex;*/
  flex-direction: column;
  height: 100vh;
}
#status {
  background: lightgray;
  padding: 20px 10px;
}
#summary {  
  flex: 
2 1;
  overflow: auto;
  padding: 20px 10px 0 10px;
}

<div class="wrapper">
   <header id="status">
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
     The content within this section changes dynamically<br>
   </header>
   <div id="summary">
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
     This div will automatically adjust its height and add a horizontal scroll if necessary<br>
   </div>
</div>

Answer 3

Answer №2

I completely understand your frustration. Flexbox is currently the preferred method for achieving this layout, and while there are some good polyfills available, if you're already using jQuery, I've put together a quick JSFiddle to demonstrate what you're looking to accomplish:

https://jsfiddle.net/c0un7z3r0/t9dde970/

The jQuery code itself was fine; it simply needed some CSS adjustments to properly position the elements and make them behave as intended.

#container{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100vh;
  padding:0;
  margin:0;
  background:white;
  display:inline-block;
  vertical-align:top;
}
#status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:0;
  margin:0;
  background:red;
}
#summary{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:inline-block;
  padding:0;
  margin:0;
  background:blue;
}

Additionally, in order for the child elements of #summary to overflow horizontally (rather than vertically), you'll need to set some rules to prevent line breaks when they reach the edge of the screen, such as:

#summary{
    overflow-x:auto;
    overflow-y:hidden;
}
#summary > #summary-content{
    display:inline-block;
    white-space:nowrap;
}

Answer 4

I completely understand your frustration. Flexbox is currently the preferred method for achieving this layout, and while there are some good polyfills available, if you're already using jQuery, I've put together a quick JSFiddle to demonstrate what you're looking to accomplish:

https://jsfiddle.net/c0un7z3r0/t9dde970/

The jQuery code itself was fine; it simply needed some CSS adjustments to properly position the elements and make them behave as intended.

#container{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100vh;
  padding:0;
  margin:0;
  background:white;
  display:inline-block;
  vertical-align:top;
}
#status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:0;
  margin:0;
  background:red;
}
#summary{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:inline-block;
  padding:0;
  margin:0;
  background:blue;
}

Additionally, in order for the child elements of #summary to overflow horizontally (rather than vertically), you'll need to set some rules to prevent line breaks when they reach the edge of the screen, such as:

#summary{
    overflow-x:auto;
    overflow-y:hidden;
}
#summary > #summary-content{
    display:inline-block;
    white-space:nowrap;
}

Answer 5

Answer №3

Use the vh unit to set the height of two div elements. For instance, set the header's height to 30vh and the #summary's height to 70vh. Simple as that.

Answer 6

Use the vh unit to set the height of two div elements. For instance, set the header's height to 30vh and the #summary's height to 70vh. Simple as that.

Adjust the height of a div element and enable scrolling to fit the

Answer №1

Answer №2

Answer №3

Similar questions

Implementing Material UI datetime-local feature with no minute selection

Java Entity Framework Indexing Tables

Is the $http call for OPTIONS instead of POST?

What are some strategies for enhancing the performance of a React application that contains numerous text input fields (implemented using Hooks) within a form?

Encountered issue while attempting to perform search functionality in Datatable using the Moongose-Pagination-v2 plugin

Press the "Print All" button to instantly print out all of the images in one go

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Creating clones of <li> elements using JQuery and appending them to the end of a <ul> list

Tips for implementing an `onclick` event on this specific button

Tips on displaying a successful message and automatically refreshing the page simultaneously

proper integration of socket.io

I am looking to insert an array of a specific type into a Postgres database using Node.js, but I am unsure of the process

"GM_openInTab in Userscript (Scriptish) not working properly, returning null value

What is the best way to locate the closest element using JavaScript?

JQuery autocomplete failing to display list items

Email notification will be sent upon form submission to Firestore

Encountering an issue with Angular 1.6 and webpack: controller registration problem

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

Ensuring object initialization in JavaScript

Exploring Vuetify's TreeView for Dynamic Data Management