ensured maximum height of a div attached to the bottom

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
            <div style="height: 100px;">
                1
            </div>
            <div style="height: 150px;">
                2
            </div>
            <div style="margin-bottom: 0; bottom: 0; height: 100%;">
                3
            </div>
        </div>
    </div>
</body>

DIV 1 has a set height value,

DIV 2 dynamically adjusts its height using jQuery

DIV 3 needs additional styling to stretch fully down to the bottom with a bottom: 0; property

What other CSS styles should be applied to DIV 3 for it to stretch properly?

I also require that the container element is positioned in the center of the page.

csshtml

Answer â„–2

Big thanks to the person who removed their answer, it was almost there in terms of functionality. height seems to be disregarded, but by utilizing top and position: absolute;, it did the trick. Whenever DIV 2 changes size, there should be an event triggered that resizes DIV 3:

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;text-align:center">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
        <div style="height: 100px;" id="a">
            1
        </div>
        <div style="height: 150px;" id="b">
            2
        </div>
        <div style="background-color: red; position: absolute; bottom: 0;" id="test">
            3
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#test').css('top', $('#a').height() + $('#b').height());
    });
</script>

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

Automatically populate a jQuery dropdown box with MySQL data

I have a scenario where I need to create 2 dropdown boxes. The first dropdown box will display all the tables from a database, and when a table is selected, the second dropdown box should be populated with fields from that specific table. Dropdown Box 1: ...

jqueryhtmldrop-down-menu

Steps for pulling information from the database and presenting it in a text box for users to edit

I'm struggling with a webpage that should allow users to update data from the database, but for some reason, the data is not displaying in the textbox. How can I make it show up correctly? Currently, on my webpage, users have to manually input all th ...

htmldjangodjango-viewsdjango-forms

Please enter the text in the field provided at the bottom using IE10

Why is the text inside my input appearing at the bottom in IE10, while it displays in the middle on FF and Chrome? http://jsfiddle.net/PXN2e/2/ input.form-text { color: #999999; font-size: 14px; height: 30px; line-height: 30px; paddin ...

htmlcssinput

Do XAML-based apps on Windows 8 provide a noticeable speed advantage over those built with HTML and CSS?

We are in the process of developing a photo-heavy Windows 8 Metro-style app and are concerned about UI performance. While choosing Objective-C over HTML for iOS was an easy decision to achieve the necessary UI performance, we are unsure about the speed com ...

htmlxamlwindows-8microsoft-metrowinrt-xaml

"Utilizing ng class with an array of objects: A step-by-step guide

I am facing a scenario in which my response appears as follows: "currency" : [ { "_id" : ObjectId("584aad5d3e2537613e5f4c39"), "name" : "USD" } ], I need to enable my checkbox based on the currency name. I attempted the followi ...

javascriptcssangularjsarrays

Explore the versatility of jQuery by utilizing multiple objects in your POST and GET requests to PHP for enhanced

I am trying to send multiple arrays to a PHP page using jQuery and retrieve results, but I am encountering an issue where the array values are not being properly passed to the PHP page. Notice: Undefined index: $name Notice: Undefined index: $type Notice ...

phpjqueryhtmlarrays

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...

javascriptjqueryhtmlcss

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables

Client request: receive a daily update detailing the differences between two databases

Today, a customer requested that I provide daily reports on the changes between two tables in our database. I am currently contemplating the most efficient and intelligent way to fulfill this request. Should I create a SQL procedure? Or perhaps an HTML p ...

htmlsqlreport

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

htmlcssreactjs

variations in menu functionality on firefox

Could you please take a look at the links below? It appears that there may be an issue with FireFox. The green top menu seems to be displaying incorrectly. In Chrome/IE, it appears in one line, but in FF, the last two links are on the second line despite s ...

htmlcss

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

pythonhtmlcsspandas

Breaking the line within a text area field

Currently, I am working on a PHP form that includes a textarea where users can input data. This data is sent to the script using $_POST and then stored in a database. One issue I have encountered is that if a user populates the textarea but does not press ...

phphtmltextareanl2br

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

How can I set a checkbox as mandatory using ng-messages and Ionic framework?

I am currently developing a form for my application using Cordova CLI 8.0, Ionic 1.3.5, and AngularJS 1.5. My goal is to set a checkbox as required within the form. Here's the approach I have taken so far: <ion-checkbox name="entry.exportcode" n ...

angularjshtmlformsionic-framework

Discovering the XPath for a Tag containing both span and div attributes

Can anyone assist me in finding the XPath for this specific element: <a class="channel_code" href="javascript:void(0)" oldtitle="<span style="text-decoration: underline; margin: 4px">CID:</span><div style="margin: 8px 4px 4px;">channe ...

htmlseleniumxpathselenium-webdriver

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

Greetings, I have a couple of interrelated inquiries: Upon clicking the code snippet below, why does <a mat-raised-button href="../pdfs/test.pdf"></a> change the URL (refer to image 4) instead of opening test.pdf in a new window? If I have a ...

htmlangulartypescriptangular-material2