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

Is it possible to transfer items from one list within a component to another list inside a different component with Vue draggable?

It is impossible to add a new element between two existing elements that share the same parent

Effort to update Div element with Ajax fails to function

Scrape embedded content within an IFrame on a webpage with Java

What is the best way to display a bitmap image in a Div, Span, Label, etc. on an Asp.Net page without using a Handler?

What is the best way to style these CSS elements within the stylesheet?

Embedding SVG styling directly into the HTML document

The CSS theme fails to adapt to changes made using jQuery

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

Utilize Angular2's input type number without the option for decimal values

Extracting HTML elements between tags in Node.js is a common task faced

Changing colors when hovering over different elements

Concealing Contact Form Using Javascript

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

Enable scrolling for a div positioned beneath another div

AngularJS: dynamic autocomplete field with scroll functionality

Is it possible that CSS files are not being excluded from content scripts in manifest.json?

iFrame initially loads the page and subsequently reloads it continuously in a separate tab

Arranging content in a horizontal row using div elements

Issue encountered when attempting to connect an external script to a Vue single file component