Tips for matching the height of a child div to its parent's height:

Is there a way to ensure that the height of the child div matches the height of the parent div without explicitly setting it in the CSS? Even when the parent div has a height of 300px, the child divs car1front and card1back do not seem to adjust accordingly. I have tried setting the height to auto in the CSS, but it doesn't work as expected.

If you'd like to take a look at the JSFiddle demonstration, you can visit this link: http://jsfiddle.net/tvrajja/08samL77/

Just to note, the flip-container div is actually located within usercontrol.aspx. Thank you for any assistance or suggestions you may have.


               <div style="height: 300px">
                  <div id="FlipMainId" class="flip-container" ontouchstart="this.classList.toggle('hover');" runat="server">
                     <div id="Card1" class="flipper" runat="server">
                        <div id="Card1Front" class="front" runat="server">
                           <div class="name">
                              Front
                           </div>
                        </div>
                        <div id="Card1Back" class="back" runat="server" style="border: solid">
                           Back
                        </div>
                     </div>
                  </div>
               </div>
javascripthtmlcss

Answer №1

Adding height: 100%; as recommended by imgonzalves has resolved the issue for me on your fiddle.

Here is the CSS code that worked:

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    height: 100%;
    width: 100%;
}

/* IE Compatibility */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}

.flipper {
    height:100%;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    height:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
    top: 0;
    left: 0;
    align-content: center;
}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
}

.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    border: none;
}

.front .name {
    display: inline-block;
    font-family: Helvetica, times, serif;
    margin: 0 auto;
    padding: 1px;
    border-radius: 2px;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #DCF3FF;  
}

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

Redux application is not functioning properly

I followed the official documentation to create a Redux app at http://redux.js.org/docs/basics/ but it's not working as expected. I have organized my code into four files: store, reducers, actions, and build. actions.js: export const ADD_TODO = &apo ...

javascriptreactjsredux

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

javascripthtmlajax

The correct way to extract a jwt token from headers and integrate it into an express application

After successfully implementing both the frontend and backend in express.js with authentication and authorization using JWT, I have confirmed that the JWT token is being properly set upon login. You can see the auth-token key in the image below: https://i ...

javascriptnode.jsexpressjwtauthorization

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Looking to achieve a CSS3 linear transition for a "list-style-image" specifically for Firefox? You'll need to include "-moz-" in your code. -moz-transition: list-style-image 0.2s linear; However, the above code is not producing the desired result. I ...

htmlfirefoxcss

Choosing an option from the dropdown menu with the help of the incredible HTMX framework

I attempted the provided solution but unfortunately, it did not yield the desired outcome. Upon checking the HTMX log, it appears that everything is set up correctly. Can anyone point out what mistake I might be making in this scenario? document.getElem ...

javascriptbootstrap-5htmxhyperscript

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

javascriptjqueryhtmlcsssimulation

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

As I continue to develop my programming skills, I have been working on configuring a database connected with nodejs in the same folder. However, when trying to make an ajax request to the database, I encountered an error indicating that the database may be ...

javascriptnode.jsreactjsajaxbackend

Determine the number of duplicate items in an array of objects using JavaScript and save the count as a separate object

I have a collection of objects in JavaScript representing products. These products are shown in a list similar to a shopping cart. The goal is to identify and count duplicate products in the array based on their _id value. Once duplicates are found, they ...

javascriptarraysreact-native

The NodeJS req.query is providing inaccurate information

When I send a JSON from the Client-Side to a NodeJS Server, it looks like this: $.ajax({ type: "POST", dataType: "jsonp", url: "www.xyz.com/save", data: { designation: "Software Developer", skills: [ "", "ASP.NET", "P ...

javascriptjqueryajaxjsonnode.js

The variable "$" cannot be found within the current context - encountering TypeScript and jQuery within a module

Whenever I attempt to utilize jQuery within a class or module, I encounter an error: /// <reference path="../jquery.d.ts" /> element: jQuery; // all is good elementou: $; // all is fine class buggers{ private element: jQuery; // The nam ...

javascriptjquerytypescript

Having trouble receiving values sent through AJAX POST requests to PHP

Can anyone help me figure out why my AJAX POST method is not sending the specific section of my URL string to my PHP file? I've checked everything and can't seem to find where the issue lies. When I var_dump the POST variable in my PHP file, it s ...

javascriptphpjqueryajaxpost

transferring a selected option from a dropdown menu to a different webpage

I need to implement a dropdown box that allows users to select a value and then use Php to send it to another page. Below is the current code for the dropdown box: Here is the code snippet for the dropdown box: Version 2: <form style="margin-top:20px ...

phphtml

At what point should I expect a promise in Protractor to be resolved?

Despite there being similar inquiries on this topic, I am struggling to comprehend them. Allow me to illustrate with an example, where my task is to click a button and verify the URL. Initially, I thought it should be coded as: element(by.id('butto ...

javascriptselenium-webdriverpromiseprotractorangularjs-e2e

Check if the user input corresponds to the content of an anchor tag by using JavaScript's built-in functionality

Looking to compare a form field input value with anchor tag values using JavaScript. Here is my form field with text input and a button: <form action="#"> <input type="text" id="desc" value=""> <input name="submit" tabindex="1" value= ...

javascripthtml

What is causing the error message "Error: Cannot update active font: 'Fira Sans' is not included in the font list" in react-font-picker?

For my project, I have implemented a font picker component in the following manner: <FontPicker apiKey={process.env.REACT_APP_GOOGLE_API_KEY} activeFontFamily={activeFontFamilyMobile} ...

javascripthtmlreactjs

Exploring the World of HTML and PHP

I've recently started learning HTML and PHP. After installing the XAMPP software on my Windows computer, I launched the Apache and MySQL servers and created an HTML file like the one below - however, the PHP code doesn't seem to be executing. Eve ...

phphtmlmysqlapachexampp

Unable to apply box-shadow styling to input elements

Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...

css

Did I incorrectly associate the function with the button causing it to always be executed?

I am working on a PHP page, where I have some initial content followed by session initialization code: <?php session_start(); ?> The requirement is to display a disconnect button only if the user is logged in, indicated by the presence of $_SESS ...

javascriptphphtml

Instant disconnection from OBS WebSocket detected

I'm currently working on developing an application to manage OBS, but I encountered an issue while trying to establish a connection with Node. Despite having the correct port and password set up, my connection gets terminated immediately after running ...

javascriptnode.jswebsocketobs