divs adjusting to available height

Here is an example code snippet:

<div id="parent">
    <div id="top">
    </div>
    <div id="mid">
    </div>
</div>

Link to Example

I am looking to position the green div below the yellow one, with its height always adjusting to fill the parent div accurately. For instance, if the parent's height is 300 and the yellow div's height is 100, then the green div should be 200 in height. Similarly, if the parent's height is 350 and the yellow div's height is 50, then the green div should be 300 in height.

I want this functionality to work even if the heights of the yellow or green divs are changed dynamically during runtime using JavaScript. Is it possible to achieve this effect purely with CSS?

Thank you.

htmlcsslayout

Answer №1

If sticking with pixels is your preference, the following solution using only CSS might be the closest option available:

#mid{
    position:absolute;
    background:blue;
    width:100%;
    top:120px;
    bottom:0px;
}

http://jsfiddle.net/ExampleUser/ABC123/

It's important to note that the top property is set equal to the height of the #top div in this example. This implies that the height of #top must remain fixed. If you wish to alter this height dynamically through JavaScript or a similar method, you may want to adjust the top value accordingly as well.

Answer №2

http://example.com/ABCDE/1/

Experiment with the position:absolute; property: where the #top div remains a fixed size in a specific location, and apply height: 100% to the #mid div.

#container{
    position:relative;
    border: 1px solid blue;
    height: 400px;
    width: 250px;
}

#top{
    position:absolute;
    background:orange;
    height: 120px;
    width:100%;
    top:0px;
    bottom:0px;
    z-index: 2; /* necessary for proper layering */
}

#mid{
    background:purple;
    width:100%;
    height: 100%;
}

Answer №3

A quick response to your inquiry would be affirmative - achieving this solely with CSS is indeed feasible. One approach could involve setting the green box's height to 100% and utilizing overflow:hidden; within the parent div. Adjusting the height of the yellow element can then create the illusion of proportional variation.

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

The document.getElementsByClassName method in JavaScript is returning an Array with a length property value of 0

My HTML contains a list of li elements with one class. I am attempting to collect them all and place them in an array to determine how many have been gathered. However, when I attempt to display the number using the .length property of the array returned b ...

javascripthtmlcssarrays

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

csscss-animations

The <base> tag functions properly when used with the <a href> attribute, but encounters issues when used with JavaScript's document

Encountering an issue with the <base> tag in Internet Explorer (tested on IE11). Despite successfully getting my links to work using the <a href> tag, they fail to work when attempting to use JS document.location. To see this issue in action, ...

javascripthtmlinternet-explorerinternet-explorer-11

How to show a tooltip inline by utilizing CSS styling

Working on a sticky side bar menu with a tooltip feature. While it appears correctly in Chrome and Safari, the tooltip is off-center in IE. This snippet seems to be causing the issue: /* Vertically center tooltip content for left/right tooltips */ .tool ...

htmlcssinternet-explorer

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am seeking a way to conceal list elements according to a specified string input using JavaScript

Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...

javascriptcssdjangofrontend

jQuery issue with hover and mousedown

Hello everyone, I have a little challenge that I believe shouldn't be too complicated. What I want to achieve is displaying an image in a cell when the mouse hovers over it. Here's the setup: <table id="selectable"> <tr> ...

jqueryhtmlhover

Issues with the CSS property clear:both causing a significant gap

Coding in HTML <div id="site-content"> <div class="site-content"> <div id="site-content-left"> <h1>NEW COURSE OFFERINGS</h1> <div id="site-conten ...

htmlcsscss-float

The Bootstrap 4 dropdown seems to have a one-time use limit

I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Belo ...

htmljquerycssbootstrap-4responsive-design

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

css

Organize the attributes of components on the following line in Visual Studio Code

Is there a method to configure the VS code formatter for Angular 2+ templates to ensure that attributes are wrapped in a new line? I prefer this formatting: <app [input1]="input1$ | async" [input2]="input2$ | async" (inputChanged)="set ...

htmlangularvisual-studio-code

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...

javascripthtmldjangovue.js

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

javascriptphphtmlajax

Can you explain the significance of (.browser-default).valid?

While exploring some code online, I came across this snippet: input[type=text]:not(.browser-default).valid. I understand the purpose of the :not selector in this code, but I have a couple of questions: What is the role of (.browser-default) in this c ...

css

Error encountered when trying to show a modal using a PHP script

I'm encountering an issue with the modal system on my website. Let me share some code snippets: MODALS ARE BUILT WITH W3.CSS LIBRARY modal.js (including debug statements) let modal = null; let title = null; let content = null; $(document).ready(() = ...

javascriptphphtmljquerycss

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

I am using the Date Picker component from Material-UI for React JS to display selected dates in a table. However, I am encountering an error when trying to show the date object in a table row. Can anyone provide guidance on how to achieve this? import ...

javascripthtmlreactjsmaterial-ui

Adjusting the left and right margins within a Bootstrap row nested inside a card component

I am struggling to adjust the left and right margins for a Bootstrap row inside a card. Below is my CSS code along with some screenshots for reference. <div class="container" style="margin-bottom: -20px;"> <div class=" ...

htmlcssbootstrap-4

Adjust the size of a nested div within a bootstrap container

My dilemma arises when nesting a product slider div inside a bootstrap col-lg-x div, as illustrated below: https://i.sstatic.net/9tCVA.png The issue lies in the layout distortion that occurs within a div.row > div.col-lg-8 structure, where images are ...

htmlcsstwitter-bootstrapmedia-queries