Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute.

<style>
    body, html { height:100%, width:100% }
    .page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0}
    .bottom { position absolute; bottom: 0; right: 0; left: 0; }
    .top { position absolute; bottom: 0; right: 0; left: 0; }
</style>

I need help figuring out how to make it so the top div adjusts its size based on whatever space is left by the bottom div. For example, if the window height is 600px, the bottom div takes up 400px and the top div should take up the remaining 200px.

javascriptjqueryhtmlcss

Answer №1

Is it necessary to have a top div when using pure CSS?

Explore this JSFiddle Demo

This demo illustrates that it is possible to place a div at the bottom without a top div, allowing the parent div to fill the remaining space.

HTML:

<div class="page">
    this is top
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

CSS:

body, html { height:100%, width:100% }
.page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0; background-color:green}
.bottom { position: absolute; bottom: 0; right: 0; left: 0; background-color:red}



Update:

If you do need a top div to fill the remaining height, you may need to use JQuery as there isn't a purely CSS solution for cross-browser compatibility.

Assuming your HTML structure is like this:

<div class="page">
    <div class="top">
        this is top
    </div>
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

Use this JS:

function setHeight() {
    $(".top").height($(".page").height() - $(".bottom").height());
}

$(document).ready(setHeight);
$(window).resize(setHeight);

Check JSFiddle Demo

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

Add a transition or animation effect to the <details> element as it closes

I am experimenting with adding a transition effect to the details element when it opens and closes: details { height: 1em; transition: height 2s; border: 1px solid; overflow: hidden; white-space: pre; } details[open] { height: 6em } <det ...

htmlcss

Fetch external navigation and refresh hyperlinks

After spending an hour searching on Google without finding a solution to my problem, I decided to reach out here for help. Currently, I have a site hosted on a CMS platform and recently created a WordPress blog on a subdomain on a new server. Unfortunatel ...

phpjqueryajax

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

I'm struggling to find the right way to articulate my issue in the title because it's quite specific to my current situation. Basically, I have two external classes structured like this: class Config { public level: number = 1; //this is a s ...

javascriptreactjstypescript

Contains a D3 (version 3.4) edge bundle chart along with a convenient update button for loading fresh datasets

I am looking to update my D3 (v3.4) edge bundling chart with a new dataset when a user clicks an 'update' button. Specifically, I want the chart to display data from the data2.json file instead of data1.json. Although I have started creating an u ...

javascripthtmld3.js

Variable remains unchanged by method

I am currently working on an app that utilizes the user's webcam. In case navigator.getUserMedia fails, I need to change the error variable to display the appropriate error message instead of the stream output. Since I am new to Vue, please bear with ...

javascriptvue.js

The jQuery calendar malfunctions on desktop devices but functions properly on mobile devices

Experiencing an unusual issue with the jQuery calendar on my website. The code is within a block (widget) in the Flatsome theme on Wordpress, and I'm using the same block for both desktop and mobile versions of the header builder. Strangely, the calen ...

jquerywordpressformscalendar

Experience the mesmerizing motion of a D3.js Bar Chart as it ascends from the bottom to the top. Feel free to

Here is the snippet of code I am working with. Please check the link for the output graph demonstration. [Click here to view the output graph demo][1] (The current animation in the output is from top to bottom) I want to animate the bars from Bottom to ...

javascriptangulartypescriptd3.js

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...

javascriptcssreactjsnext.jsnext-auth

Generate a smooth, flicker-free card flip animation in CSS3 across all browsers while addressing any z-index or perspective issues

Currently, I am attempting to implement a simple cross-browser 3D CSS3 card flip effect on my testing website. The outcome functions perfectly in Firefox; however, in WebKit, one part of the image vanishes during the rotation and also experiences noticeab ...

csscross-browsercss-transitions

Perpetual duplication of data occurs upon inserting an item into the Array state of a React component

Whenever a new item is added to the React JS Array state, data duplication occurs. console.log(newData) The above code outputs a single object, but when you print the actual data with console.log(data) You will notice continuous duplicates of the same da ...

javascriptreactjsreact-hooksjsx

Execute a Node.JS query using an HTML select dropdown

My goal is to customize queries to a mySQL database based on the user's selection from select options on my website. Here is the HTML code: <select id = "year"> <option value = "yr" selected>Choose a Year</option> <option id = " ...

javascriptmysqlajaxnode.js

Steps to implement a text border in Raphael.js

I have a website dedicated to creating customized football jersey designs. I'm utilizing Raphael.js for customization, and I am looking for a way to add an outline to text using Raphael. My research led me to the suggestion of using the stroke proper ...

javascriptphpjquerycssraphael

Adding tween.js seems to have caused the button click event to stop triggering

After adding the code line to tween my display box, the click event is no longer triggered. There are no errors in the console. How can I resolve this issue and what might have caused it? createjs.Tween.get(directionsbox, { loop: false }).to({ x:800, y: ...

javascriptjqueryhtmlcreatejstween

Enhance the appearance of your Dojo TabContainer when viewing in Internet Explorer

Firefox seems to handle the following code without any issues: < div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%"> < div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%"> {% fo ...

cssinternet-explorerdojotabcontainerdijit.layout

Obtain the Key from an Array Button ID upon Click Event Using jQuery

Hey there, I'm new to jQuery and looking for some guidance. I'm attempting to extract the key value from a button's ID when it is clicked. Here's an example of what I'm working with: <button id="button[1]">Submit< ...

phpjqueryarrays

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

javascriptjquerycssjquery-mobile

Show or hide a specific element based on the property assigned to a user's role

In my current project, I am focusing on distinguishing between two key user roles: editor and guest. The editor holds complete privileges for create, read, update, and delete operations, while the guest is limited to viewing certain elements like a list ...

javascriptvue.jsroles

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

Hovering over a container will display the text in a single line

<div class="flex-container"> <div class="red hover flex"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h1> </div> ...

htmlcssflexbox

Javascript functions triggering repeatedly

I'm working on creating a fun trivia quiz using JavaScript functions. Each question involves globally defined functions called "right" and "wrong" that are supposed to update the score accordingly. However, I've run into an issue where the quiz s ...

javascript