Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

Question

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

I am trying to implement a specific layout using HTML and CSS on a webpage. So far, I have successfully created the black, red, and blue areas, but I am facing challenges with the scrollable green content. It currently has a static height, but I need it to dynamically fill the remainder of the page.

Here is my current code: Link to Code

<div class="body">   
    <div class="menu">
        menu
    </div>           
    <div>
        <div class="dynamiccontent">
            <div class="errorheader">
                Errors
            </div>
            <div class="errorcontent">
                errors   
            </div>
            <div class="fixedtext">
                some text
            </div>            
            <div class="fillcontent">
                fillcontent
            </div>
        </div>
    </div>

.body 
    { 
        background:red; 
        margin:0 auto;
        width:100%;
        top:0px;
    }
    
    .menu 
    { 
        background:black;
        color: white;
        height: 100px;
    } 
    
    .dynamiccontent
    {
        position:fixed;
        top:50px;
        margin:0px auto;
        width:100%;     
        background: red;
    }
    
    .errorheader
    { 
        color: white;    
        text-align: center;    
        font-size: 1.4em;
    }
    
    .errorcontent
    {    
        color: white;   
        text-align: center;   
    }
    
    .fixedtext 
    {
        background: blue; 
        color: white;
        position: relative;
    }
    
    .fillcontent
    {
        background: green; 
        position: relative; 
        overflow: auto; 
        z-index: 1; 
        height: 400px;
    }

One additional feature I would like to include is the use of the browser's standard scrollbar on the right side, instead of just having a local short scrollbar within the green content box.

Any guidance or assistance you can provide would be greatly appreciated!

html css

Answer 1

Answer №1

To achieve the desired effect, you can apply overflow:hidden to html,body,.main and overflow:scroll to .main-content.

HTML:

<div class="main">
    <div class="header">header</div>
    <div class="dynamic-content">
        <div class="dynamic-content-text">
            dynamic-content-text<br/>...
        </div>
        <div class="dynamic-content-fixed">dynamic-content-fixed</div>
    </div>
    <div class="main-content">
        main-content<br />...
    </div>
</div>

CSS:

html,body, .main{
    margin:0;
    padding:0;
    height:100%;
    overflow: hidden;
}

.header{
    position: fixed;
    left:0;
    right:0;
    height:50px;
    background: red;
}

.dynamic-content{
    padding-top:50px;
}

.dynamic-content-text{
    background:yellow;
}

.dynamic-content-fixed{
    background:blue;
}

.main-content{
    background:green;
    height:100%;
    overflow: scroll;
}

JSFiddle

Answer 2

To achieve the desired effect, you can apply overflow:hidden to html,body,.main and overflow:scroll to .main-content.

HTML:

<div class="main">
    <div class="header">header</div>
    <div class="dynamic-content">
        <div class="dynamic-content-text">
            dynamic-content-text<br/>...
        </div>
        <div class="dynamic-content-fixed">dynamic-content-fixed</div>
    </div>
    <div class="main-content">
        main-content<br />...
    </div>
</div>

CSS:

html,body, .main{
    margin:0;
    padding:0;
    height:100%;
    overflow: hidden;
}

.header{
    position: fixed;
    left:0;
    right:0;
    height:50px;
    background: red;
}

.dynamic-content{
    padding-top:50px;
}

.dynamic-content-text{
    background:yellow;
}

.dynamic-content-fixed{
    background:blue;
}

.main-content{
    background:green;
    height:100%;
    overflow: scroll;
}

JSFiddle

Answer 3

Answer №2

To accomplish this task, utilize jQuery or JavaScript.

Start by checking if the page has a scrollbar; if not, adjustments are required. If there is no scrollbar, extend the last container to occupy the remaining window space.

Add up the heights of all containers and subtract it from the window height, then assign this value as the height for the last container.

Here's an example method (Not tested)

 $(document).ready(function(){
     if(!hasScrollbar()) {
        var filled = $(".errorheader").outerHeight() + ... ;
        $(".fillcontent").height($(window).height()-filled);
     }
 });

There are various code snippets available for determining whether a window has a scrollbar, look into stackoverflow for solutions. Additionally, you can add a callback for $(window).resize(); if users are expected to resize the window.

Another approach could involve using the body element to simulate the expansion of the last container. If the containers can be identified by their background, apply the same background to the as the final container. Ensure that the body fills 100% of the window.

Answer 4

To accomplish this task, utilize jQuery or JavaScript.

Start by checking if the page has a scrollbar; if not, adjustments are required. If there is no scrollbar, extend the last container to occupy the remaining window space.

Add up the heights of all containers and subtract it from the window height, then assign this value as the height for the last container.

Here's an example method (Not tested)

 $(document).ready(function(){
     if(!hasScrollbar()) {
        var filled = $(".errorheader").outerHeight() + ... ;
        $(".fillcontent").height($(window).height()-filled);
     }
 });

There are various code snippets available for determining whether a window has a scrollbar, look into stackoverflow for solutions. Additionally, you can add a callback for $(window).resize(); if users are expected to resize the window.

Another approach could involve using the body element to simulate the expansion of the last container. If the containers can be identified by their background, apply the same background to the as the final container. Ensure that the body fills 100% of the window.

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

Answer №1

Answer №2

Similar questions

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Switch Image to Background Image on Mobile Devices

Making modifications to the CSS within an embedded iframe webpage

In need of assistance with filtering lists using JQuery

How can I create a hyperlink that leads to multiple pages?

Formcontrol is not functioning properly with invalid input

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

Is your browser tab failing to display the complete URL?

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Implementing Conditional Display of Span Tags in React Based on Timer Duration

Grid of domes, fluid contained within fixed structures and beyond

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

Streamlining all icons to a single downward rotation

The issue of the JQuery method failing to function properly on a button arises when the button is added

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I am having trouble placing the button within the image

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Python Selenium error: NoSuchElementException - Unable to find the specified element

Changing the Displayed Content with a Simple Click of a Link

I desire to incorporate a subtle fading effect into the script