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

Tips for centering elements in an image caption

AngularJS Material Design sticky header MD table container

CSS Switchable Style Feature

Taking pictures with the camera in three.js on an iPhone

Fresh sheet with a view through the window

Unable to adjust image opacity using jQuery

Using JSTL within JavaScript

Is it possible to automatically adjust the cursor position in a textarea when the language is switched?

Guide on navigating to a specific page with ngx-bootstrap pagination

removing functionality across various inputs

Is there a way in Material UI to dynamically update the border color of a TextField once the user inputs text?

PhoneGap redirect page feature

Is there a way to interact with a Bootstrap 5 dropdown in React without triggering it to close upon clicking?

Sass: Overcoming the challenge of the IE limitation on 4095 selectors per stylesheet

Is it necessary to restart the IIS Site when altering the contents of index.html?

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

Resolving issues with CSS placement and resizing

Struggling to fetch option value from a dynamic add/remove list using a combination of PHP, jQuery, and HTML5

Tips for concealing the check mark within a checkbox upon selection

What is the method used by Chrome dev tools to create CSS selectors?