generate a flexible div that adjusts its height based on the size of the browser window

Question

generate a flexible div that adjusts its height based on the size of the browser window

Is it possible to create a div layout structured like this:

<div_wrapper>
        <div_header>
        </div_header>

        <div_content>
        </div_content>
    </div_wrapper>

Upon page load, the div_header occupies 200px while the div_content fills the remaining vertical space. Additionally, as the browser changes sizes (e.g., user drags the corner of the browser), the div_header remains at 200px and the div_content dynamically adjusts its size accordingly.

Is this layout achievable? Thank you.

css html dynamic

Answer 1

Answer №1

Here's the solution you've been looking for:

#container{min-height:100%;}
#topbar{
    height:200px;
    float:left;
    width:100%;
}
#mainContent{
    height:100%;
}

Answer 2

Here's the solution you've been looking for:

#container{min-height:100%;}
#topbar{
    height:200px;
    float:left;
    width:100%;
}
#mainContent{
    height:100%;
}

Answer 3

Answer №2

There is no issue with using div_header(). Simply create a CSS rule like this:

#header{height:200px;}

You can utilize JavaScript to resize your content(). If you have jQuery included:

$(document).ready(function(){
     $(window).resize(function(){
         $('#content').css("height", ($(window).height() - 200) + "px");
     });
     $('#content').css("height", ($(window).height() - 200) + "px");
});

I hope this solution helps!

Answer 4

There is no issue with using div_header(). Simply create a CSS rule like this:

#header{height:200px;}

You can utilize JavaScript to resize your content(). If you have jQuery included:

$(document).ready(function(){
     $(window).resize(function(){
         $('#content').css("height", ($(window).height() - 200) + "px");
     });
     $('#content').css("height", ($(window).height() - 200) + "px");
});

I hope this solution helps!

generate a flexible div that adjusts its height based on the size of the browser window

Answer №1

Answer №2

Similar questions

What is a clear indication that a <div> is filled with text?

Add a fading transition feature to images that are loaded at a later time

Implementing CSS counter-increment with jQuery

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

Loading a Div Element on the Fly

PHP script encounters error while trying to modify CSS class

Bootstrap is an outdated page template that lacks responsiveness

The data input from the HTML is not being correctly transferred to the modal

When the form is submitted, I am unable to record the checkbox value

What is the best way to display tip boxes for content that is added dynamically?

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

Gaps separating frames

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Issue with overlay functionality after updating to jQuery version 1.12.1

Setting the chosen value within a nested ng-repeat loop

Update the content of a div element with the data retrieved through an Ajax response

I am looking to update a WordPress site every 10 seconds to keep it current

Tips for displaying live data in the rows of Element UI's Table

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not