div with height that constantly changes

Currently, I am facing an issue where I need to scroll the main content div while keeping the header fixed. The header has a set height, and the content div should fill the remaining vertical space with a scroll bar when needed. Normally, I would use absolute positioning on the content div (

top:height-of-header, bottom:0, left:0, right:0
) and set overflow-x to auto. However, the complexity arises from having an additional div between the header and content, which has a dynamic height based on its contents and may or may not be visible. Due to this setup, it is challenging to use absolute positioning for the content div as the top distance varies. Using percentage heights is also not ideal as I want the non-scrolling portions to adjust their height based on their content rather than a percentage of the page.

Here is a simplified version of the structure:

<div id="header"></div>     <--- Fixed height
<div id="adddiv"></div>     <--- Not always visible. Flexible height.
<div id="content"></div>    <--- Only intended for scrolling

Edit: A larger example can be found in this jsfiddle link: https://jsfiddle.net/r7b30v2f/4/ (The scrollbar behavior is not as desired)

As I am using JavaScript to handle the toggling of the "middle" div, I could dynamically change the top value for the content div based on the visibility of the middle div. However, I am exploring a CSS solution first if one exists.

htmlcssscrollbar

Answer №1

When the height or max-height of the contents div is set, a scroll bar will be placed within it. Here's an example using CSS:

#contents {
    max-height: 250px;
    width: 100%;
    overflow-y: auto;
}

Alternatively, you can calculate the height by adding the heights of the header and adddiv like so:

var headerHeight = document.getElementById("header").offsetHeight;
var adddivHeight = document.getElementById("adddiv").offsetHeight;
var heightUsed = headerHeight + adddivHeight;
var totalHeight = screen.height;
var height = totalHeight - heightUsed;

(I attempted this approach myself but couldn't get it to function properly. However, I wanted to share what could potentially be the solution.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

Passing a filter expression with the boolean value "true" at the end to an AngularJS directive

I created a directive called smDualList for the mover list. Here is a snippet of the directive's template: <div> <select class="select-list" multiple ng-model="unassigned" ...

javascripthtmlangularjsangularjs-directive

Introducing Vue 3: A Component featuring Tab Icons

I created a tab overview and to avoid overwhelming the api with too many calls, I decided to put them in a loop following the instructions in the documentation: link Although everything is functioning properly, my tabs have icons and translations, and I a ...

javascripthtmlvue.jsvuejs3

Issue with scrolling up on a responsive table when using Bootstrap-select

When I have a bootstrap-select inside a td of a table-responsive table, I encounter an issue. If I click on the select-picker, the dropdown menu is not completely visible as the visibility is limited by the table margin. To address this, I tried adding d ...

htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker

Drop down menu malfunctioning on all IE browsers within eBay product listings

Hello everyone, I trust you are all well. I have encountered an issue and would appreciate some guidance. Currently, I have a drop-down navigation menu for one of my eBay listings. This menu functions correctly on all browsers except for IE browsers. To p ...

htmlcssdrop-down-menumenu

The navigation bar's icons are not displaying correctly in Bootstrap

I'm working on building a navigation bar using Bootstrap, but I'm facing an issue with the home icon not displaying correctly. It's not aligned properly and doesn't flow seamlessly with the rest of the list items. Can someone please ass ...

htmlcsstwitter-bootstrap

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float

"Upon refresh, the overflow property of the child element is being applied to the window position

In the React app I'm working on, there's a search results page where users can apply filters. These filter selections update the query params in the URL and trigger a re-mount in React. However, I've encountered an issue across different bro ...

javascripthtmlcssreactjs

Adjust the width of a modal in Bootbox for a specific modal only

Currently, I am successfully using Bootbox 4 along with Bootstrap 3 on IE (IE 8 / IE 9) without any issues. In Bootstrap 3, it seems that you can adjust the modal width using CSS like this, but the drawback is that this change will apply to all modals: . ...

jquerycsstwitter-bootstrapbootbox

"Using Bootstrap to specifically align a grid of images in the center on any screen size

I'm currently utilizing bootstrap to center a group of social icons beneath an h1 text on all screen sizes. While I've managed to achieve this, there are two specific sizes where the alignment seems to be off. Here's a snapshot showing a sl ...

htmlcsstwitter-bootstrap

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

jquerycss

Modify the tooltip background color within Angular

I have a tooltip and I would like to customize its background. Currently, the default background color is black. <ng-template #start>Start</ng-template> <button [ngbTooltip]="start" type="button" class="btn btn-outline-danger"> &l ...

cssangulartypescripttwitter-bootstrapbootstrap-4

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

cssreactjsgridmaterial-uiwidth

What is the best way to set a fixed placeholder at the upper left corner of the input field?

I'm working on customizing an Input component from antd. My goal is to keep the placeholder text constant, small, and positioned in the top left corner of the component. So far, I've successfully moved the placeholder to the top left corner, but ...

cssreactjsantdstyled-componentsplaceholder

The Transition Division Is Malfunctioning

I've encountered an issue where I am trying to move a div by adjusting its left property, but no transition is taking place. Regardless of the changes I make to my code, the result remains the same. Below is the current state of the code. Can anyone i ...

javascripthtmlcssangularjs

Ensure that the div remains fixed at the bottom even when multiple items are added

Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...

javascripthtmljquery

How to manipulate wrapping behavior in flexbox

My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...

htmlcssflexbox

What steps should I take to ensure that flex aligns the inner-divs on the same row?

I have observed that flex can easily align input tags, regular text, and other elements perfectly on a single line with the flex-direction:row; property. However, this alignment seems to get disrupted when one of the elements is a div. For example: <ht ...

cssflexbox

Choose an option that impacts various elements

I am currently working on dynamically creating cards within a loop. These cards contain various elements such as tables, select inputs, labels, etc. I have successfully implemented functionality where one of the select inputs changes the color of the card ...

javascriptphphtmljquery

Working with PHP and CodeIgniter to highlight active nav-link in Bootstrap for a subdirectory

Just starting out with Bootstrap and running into a little issue. Spent some time on it but can't seem to figure it out. Perhaps it's something simple that I'm overlooking. Essentially, my goal is to keep the nav-link active when navigating ...

phphtmlcsstwitter-bootstrapcodeigniter