Question 44995 in Html Question posted in
Some basic documentation can be found here.

Why when setting height:100% and position: absolute, .test2 became 200px instead of 204px? – Html

I set a height of 200px for one of the container elements, the container itself stretched to the height of the content (200px). Then I added another element to the container and set the height to 100%, nothing worked because height:100% uses the height of the parent element, which has no height set, after that I wondered what would happen if I set position: absolute, I set it and for some reason percentages started to really see the height of the parent class, but a little crooked, because the height of the parent class should be 200px, but it shows that it is 204px

My question is for you to explain to me where the 4px came from, why is it 100% 204px and not 200px enter image description here ?
Also, I want you to explain to me why after position: absolute the percentages started to work, despite the fact that the height is not set in the parent class?

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

div {
  display: inline-block;
  width: 50px;
}

.container {
  position: relative;
  width: 100%;
}

.test {
  height: 200px;
  background-color: aqua;
}

.test2 {
  height: 100%;
  position: absolute;
  background-color: blue;
}
<div class="container">
  <div class="test"></div>
  <div class="test2"></div>
</div>

My question is for you to explain to me where the 4px came from, why is it 100% 204px and not 200px?
Also, I want you to explain to me why after position: absolute the percentages started to work, despite the fact that the height is not set in the parent class?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have figured out the problem and will only explain why the space below appears. The size of the absolutely positioned element will automatically adjust after this. What I highlighted are quotes from the specification.

    The issue is that since div.container is a block element container with only inline-level elements inside, a new inline formatting context is created for its content, here's how it's explained: An inline formatting context is established by a block container box that contains no block-level boxes. One of the characteristics of this formatting is that all inline-level boxes on one line are combined into a line box: The rectangular area that contains the boxes that form a line is called a line box. Vertical-align property applies to inline-level elements and its default value is baseline: Align the baseline of the box with the baseline of the parent box. And in our case, this default alignment is being used. In this case, the baseline of our div.test is aligned relative to the baseline strut of the parent block container element. Here's an explanation of how alignment works relative to the baseline: ...only have meaning with respect to a parent inline element, or to the strut of a parent block container element. The baseline for an inline-block without content, which is what our div.test is in this case, is the bottom margin edge: The baseline of an 'inline-block' is the baseline of its last line box ...... in which case the baseline is the bottom margin edge. After alignment, the relative baseline height of the line box becomes slightly higher than our div.test, this means that the height of the line box in this case depends on two things: the height of the div.test, which is determined in this case by for replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box, and the empty space below, which is explained as ...it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up), as a result, the height of div.container becomes: ...distance between the top of the topmost line box and the bottom of the bottommost line box, in this case, it is exactly the line box of our div.test.

    If set vertical-align: top or bottom, the space below in the line box disappears. This is because these values align with respect to the line box: ....values align the element relative to the line box, and as a result, the space below that was created as a side effect of baseline alignment disappears.

    Also, you can notice that if you write at least one character in div.test, then vertical-align: baseline starts working differently, and the baseline of div.test becomes: ...baseline of its last line box, so the space below automatically disappears.


  2. 0

    No, it is not a css bug. Your container has a certain height, which is used at 100% by the second div (height: 100%), meanwhile the first div has a fixed height of 200px (height: 200px). You can add a border: 1px solid green property to your container to see how your divs are behaving within it.

    I suggest you to use Flex Boxes for this kind of thing, and pay attention to css properties you assign to your classes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search