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

Check input validations in Vue.js when a field loses focus

So I've created a table with multiple tr elements generated using a v-for loop The code snippet looks like this: <tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text ...

javascriptvue.jsvuejs2

Using Laravel and AJAX to save multiple selected filters for future use

I've been struggling with this issue for a few weeks now and just can't seem to wrap my head around it. On my webpage, I've implemented four filters: a search filter, a year filter, a launch-site filter, and a country filter. Each of these ...

javascriptphpjqueryajaxlaravel

Rendering on the server using react-router v4 and express.js

I've been working on implementing server-side rendering with the latest version of react-router v.4. I found a tutorial that I followed at this link: . However, when I refresh the browser, I encounter the following error: Invariant Violation: React.C ...

javascriptnode.jsreactjsexpressreact-router

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior? Check out this page: On the right side of the page, there are two images with textured backgroun ...

cssmicrosoft-edge

Stop the Form from Submitting When Errors are Present

In the midst of explaining my issue, I must first share details about a form I'm developing. It's a Registration form where upon submission by clicking Submit, users won't immediately reach a Successfully Registered page. Instead, they' ...

javascriptphpjqueryhtmlforms

Dealing with cross-origin error issues when using json.parse in React / MERN development

My data structure functions correctly when I use console.log: console.log(JSON.parse([values.category2]).needed_skills); However, when I pass the output of JSON.parse([values.category2]).needed_skills to a component in my application, the entire system c ...

javascriptnode.jsjsonreactjsexpress

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

Converting lists to JSON format in a C# web form

Utilizing JSON.stringify, I have implemented textbox autocomplete for a web-form that suggests city names based on user input. The goal is to retrieve relevant city names from the database and display them as suggestions in the autocomplete feature after t ...

javascriptc#jqueryasp.netjson

Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

I am currently utilizing the latest version 13.1.0. I have implemented a ContextProvider that allows switching between light and dark themes. 'use client'; import { Theme, ThemeContext } from '@store/theme'; import { ReactNode, useState ...

javascriptreactjsnext.jslocal-storage

I am facing difficulty in retrieving a unique dynamic div id using the useRef ReactJS hook, as it keeps returning the same id repeatedly

When using the useRef Reactjs hook, I encountered an issue where it returned the same id repeatedly instead of generating a dynamic div id. I need this functionality to map buttons and div ids in order to create a flexible accordion. The goal is to displ ...

javascriptreactjsreact-hooks

What is the best way to handle token expiration with jwt-simple?

After adding jwt-simple to my backend in nodejs, I am looking to set an expiry time for the tokens generated. var jwt = require('jwt-simple'); Schema.statics.encode = (data) => { return JWT.encode(data, CONSTANT.ADMIN_TOKEN_SECRET, & ...

javascriptnode.jsexpressjwt

``There seems to be an issue with JQuery.Ajax not properly displaying on Samsung Smart

I attempted to use JQuery.Ajax to interact with my webservice Below is the code snippet: Main.onLoad = function() { // Enable key event processing this.enableKeys(); widgetAPI.sendReadyEvent(); //$("#h2Test").html("Change On Text"); ...

javascriptjqueryajaxeclipse

How to Access a Web Service in ASP.NET and jQuery from any directory without worrying about localhost or production environment?

Trying to get this jQuery call to function properly on both the localhost and production server has been a challenge. The code resides in a master page, with calls originating from different locations within the file structure. Any assistance would be gr ...

jqueryasp.netajaxweb-services

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

javascriptjqueryhtmlselectdrop-down-menu

Choose a specific option from the dropdown menu using a URL parameter

After reviewing this code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function() { // Parse your query parameters here, and assi ...

javascripthtmljqueryforms

Customize each Picker.Item element in React Native with unique styles

How can I style individual Picker.Items beyond just changing the text color? Additionally, what other props can be used for a Picker.Item? I am aware of "key", "value", "label", and "color". Are there any additional props available? I want to customize o ...

javascriptreactjsreact-nativepicker

The State Hook error "state variable is not defined" arises due to an issue with the state declaration in

function Header() { const [keys, setKeys] = useState([]); //custom addition const first = (e) => { var result = new Map() axios.post('http://localhost:8000/' + query) .then(function(response){ var content ...

javascriptreactjs

Using Blob to save CSV file on Safari

Here are the codes I am using to generate a download link for users to download a .csv file from my website. var link = document.createElement("a"); link.id = "csvDwnLink"; window.URL = window.URL || window.webkitURL; var csv = "\ufeff" + CSV, b ...

javascriptjquerycsvsafari

Exploring the power of ElasticSearch alongside Mysql

As I plan the development of my next app, I am faced with the decision between using NoSQL or a Relational Database. This app will be built using ReactJS and ExpressJS. The data structure includes relational elements like videos with tags and users who li ...

javascriptmysqlnode.jselasticsearch

Guide on retrieving the innerHTML of all <a> tags within a specific span class

<span class="mgen"> <a rel="tag">Action</a> <a rel="tag">Adventure</a> <a rel="tag">Apocalypse</a> <a rel="tag">Fantasy</a> <a rel="tag" ...

javascripthtmlnode.js