What prevents a child from being able to take on a percentage of its parent's height when stretched by one of its children, but allows it to do so if it is in an absolute

Previously, I believed that setting the height of a parent element in % was impossible if none of its children had a set height, even if one child had a static height and was stretching the parent. However, I recently discovered that a child with position absolute can have a % height. Why is it that a position absolute child can have a % height while a block, inline, or floated child cannot? http://jsfiddle.net/4vmeqf16/

body > div{
  background: black;
  
}
div div:nth-child(1){
  width: 50px;
  height: 50px;
  background: red;
}
div div:nth-child(2){
  width: 20%;
  height: 20%;
  background: green;
}
div div:nth-child(3){
  width: 20%;
  height: 20%;
  position: absolute;
  background: yellow;
}
<div>
  <div></div>  
  <div></div>
  <div></div>
</div>

Answer №1

One reason why a position:absolute element doesn't impact the height of its container is because it doesn't create a circular dependency like other scenarios. The container can establish its height based on its in-flow children before layout of the absolutely positioned element occurs.

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

Issues Encountered with Bootstrap Modal Form Code

ASP.NET <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> < ...

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

experiencing difficulty with a background image that is failing to display

I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...

Is it possible to nest a container tag within a container-fluid tag?

As I work on designing a website, I am wondering if it is possible to include a container tag within a container-fluid tag. Is this considered a best practice in web design? Any insights would be appreciated! ...

Using JavaScript to alter form elements after the user submits

After the user clicks submit on a form, my goal is to modify the contents of one field and then submit it again. Despite trying various methods - around 20 in total - I have not been successful. While I can detect the submit event, prevent it, and make t ...

What is the best way to display the time of a post update similar to the style of

I am currently working on creating a notification deck. Instead of displaying the time when a notification was received, I aim to show the time that has passed since its arrival similar to how Twitter and Facebook do it with formats like "32m" or "1 hour a ...

Does the html form "action=" attribute remain effective even without a designated handler program?

For instance - <form action="http://192.168.1.20/form_action.asp" method="get"> vs. (Is it still valid HTML without a specific handler?) <form action="http://192.168.1.20" method="get> I am in the process of creating a very basic custom we ...

Text that adjusts beautifully with Bootstrap 4's responsive design

When utilizing bootstrap 4, I aim to implement various font styles for different breakpoints. While media queries can achieve this functionality, Bootstrap's website presents an example as follows: html { font-size: 1rem; } @include media-breakpoi ...

The functionality of the navigation bar becomes compromised by the content below, causing it to become

My navigation bar has position: sticky, but it stops when it reaches the top of the side navigation and the content of the page. Changing the position to fixed would hide the .ad above it. I've included scripts for the side navigation and content. How ...

What is the best way to use a button to hide specific divs upon clicking?

Is there a way to use a button onclick event to hide specific divs within a parent div? I've tried using .toggleClass('.AddCSSClassHere') but I'm not sure how to apply it to multiple divs. The jQuery snippet provided only allows me to h ...

Issues with Bottom Tab UI on iPhone X in IONIC 3

Dealing with the notch on iPhone X was a challenge for me, but I managed to solve it using only CSS. However, now I am running into an issue with this button tab. It would be great if I could either extend the button width all the way to the end of the s ...

I am looking to incorporate two YouTube videos into an HTML webpage, each in a different language. I would like to provide the option for users to select the language, even though the content

I am looking to target a global audience with my website, so the content is in English. However, I want to offer users the option to watch videos in their preferred language. I have recorded content in 4 different languages that might enhance engagement on ...

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

How can I ensure equal spacing between each div using HTML?

In my HTML code, I have a div class named 'answer_box' which contains different text for each of the four answer boxes on the page. I need to ensure that there is consistent spacing between each box, regardless of the amount of text inside, in or ...

Div with Navigation Bar

Struggling to create a Nav Bar using Divs and aligning the links side by side? Looking for some guidance on how to achieve this design? Lorem Ipsum placeholder text added here. Lorem Ipsum ad usu quem delectus, sea stet sale id. Nulla nostrud appetere ea s ...

What is the method for setting a data attribute with CSS?

In my CSS, I have the following: .map-menu .category.selected { background-image: url("../img/category-selected.png"); } However, I am trying to apply this style to elements with certain data attributes. For example, I can target a CSS element for a ...

Issue with Navbar Header: Troubleshooting and Solutions

I'm having trouble with my navigation bar. I want to add "3" under the dropdown section and set up multiple menu items, such as Link 4. I couldn't figure out how to do this in my code... Could it be that Bootstrap doesn't support this feat ...

What is the solution for correcting the currency formatting in a text input field?

Hello everyone, I have a question about formatting numbers in my code: I want to format numbers like this: 001 -> 0,01 || 10000 -> 100,00 || 10012300 -> 100.123,00 and so on... However, the issue is that my current code only adds the ',&apo ...

`Unable to display Bootstrap padding when using tabs`

Hello, I'm experiencing a strange issue with creating a form inside a container where the padding is not displaying. https://i.sstatic.net/v2AJI.png This is the HTML code: <div class="container-fluid"> <tabset tab-theme=" ...