Header and footer set in place with customizable height paired with a dual-module sidebar

I'm working on a layout that includes a fixed footer and header. My goal is to make the height of the "info-box" div variable, while having the "scrolling-div" fill the remaining vertical space in the right column. The issue arises when setting the height of scrolling-div to 100%; it ends up being as tall as the right column instead of taking up the remaining space, as shown in this fiddle.

Below is the HTML code for the page:

<body>
    <div id="header">
    </div>
    <div id="main-container">
        <div id="page-content">
            <div id="left-column">
            </div>
            <div id="right-column">
                <div id="info-box">
                This is a variable height div</div>
                <div id="scrolling-div">
                    Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> ...
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>

Here is the CSS code:

body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#header {
    position:fixed;
    height:45px;
    width:100%;
    background-color:#FF0000;
    top:0;
}

#footer {
    position:fixed;
    height:45px;
    width:100%;
    background-color: #FF00FF;
    bottom:0;
}

#main-container {
    background:#00FF00;
    position:absolute;
    top:45px;
    bottom:45px;
    width:100%;
}

#page-content {
    width:960px;
    position:relative;
    margin: 0 auto;
    background-color:#FFF000;
    height:100%;
}

#left-column {
    background-color:#444444;
    width:400px;
    height:100%;
    float:left;
}

#right-column {
    background-color:#0000FF;
    float:right;
    width:560px;
    z-index:10000;
    height:100%;
}

#info-box {
    width:100%;
    height:200px;
    background-color:#0F0F0F;
    color: #FFFFFF;
}
#scrolling-div {
    background-color:#FFFFFF;
    height:200px;
    overflow:scroll;
}

For a visual demonstration, visit this fiddle.

Thank you for your assistance!

Answer №1

To achieve this, you may have to employ some clever JavaScript techniques. Initially, I considered using the calc() function in CSS, but realized that the height of the #info-box element might vary. One simple jQuery line can be used to adjust the height of #scrolling-div to be the height of its parent container minus the height of its sibling:

$(document).ready(function() {
   $("#scrolling-div").height($("#right-column").height()-$("#info-box").height());
});

If you want to make this solution more adaptable for future scenarios (such as having multiple siblings in the container), you can utilize the following function instead:

$(document).ready(function() {
    // Define some variables
    var $sdiv = $("#scrolling-div"),
        sibHeight = 0;

    // Calculate sum of siblings' heights
    $sdiv.siblings().each(function() {
       sibHeight += $(this).height(); 
    });

    // Adjust own height to parent's height minus sum of siblings' heights
    $sdiv.height($sdiv.parent().height()-sibHeight);
});

Additionally, I suggest using overflow-y: auto over overflow: scroll. Check out the updated fiddle here - http://jsfiddle.net/teddyrised/2qXZG/

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

What is the best way to reset an HTML file input using JavaScript?

Looking for a way to reset the file input in my form. I've tried setting the sources to the same method, but it doesn't delete the selected file path. Important: Trying to find a solution without having to reload the page, reset the form, or us ...

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

What's the best way to display two checkboxes on a single line?

I am working with checkbox filters in WooCommerce and I want to organize them so that two checkboxes appear in one row, followed by the next two in the second row, and so on. The issue can be seen at this URL. I also want this style to apply to "Product Co ...

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

I am facing an issue with the layout of my product detail page. Currently, I have two components - an image gallery on the left and product information on the right. However, when the window size gets smaller, I want the product information component to mo ...

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite. I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well. ...

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

Tips for adjusting the size of nav-pills when collapsing with bootstrap 5

I'm attempting to utilize Bootstrap to create active classes that display a nav-pill/container around the active section of my webpage. It works well on larger screens, but on smaller screens with the hamburger menu active, the nav-pill stretches acro ...

Is there a way to limit HTML wrapping to 79 characters in TextMate?

I'm currently using TextMate to work on my HTML projects. When I select View > Wrap > 79 characters for certain types of content, it wraps at 79 characters as expected. But when it comes to working with HTML, this feature doesn't seem to ...

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

button that decreases in size when clicked on

Currently, I am dealing with an element that functions as a button using a combination of Javascript and CSS. To better illustrate the issue, I will simplify the example by removing unnecessary details. The main problem lies in the fact that when this elem ...

Ensure that the text in the table with a width of 100% remains stable

Currently, I am encountering an issue with the inside text moving within my application on a webpage. In my previous tables, I utilized the min-width option to prevent the text or td from shifting when resizing the website page. For example, when stretchin ...

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

The Bootstrap-Select dropdown refuses to open

I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem ...

How to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

Currently, I am exploring A-Frame using a 3D model imported from Blender. Some parts of this model contain multiple meshes with two or more materials assigned to them. It is easy for me to adjust the material properties of meshes with just one material. ...

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

I'm seeking guidance on how to efficiently showcase MySQL data using PHP and HTML

After creating a script to test output from my database, I encountered an issue. While the PHP portion works perfectly, extracting the data into an HTML div tag does not. Any suggestions on how to fix this would be greatly appreciated. Thank you. //Establ ...

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

Determine browser compatibility by evaluating the DOM Level

Can we easily determine which browser versions and above are compatible with a certain DOM level? ...