Why am I not able to set the height of .nav-footer-right?

[dense-set]

Description

So, I am creating a website project and a footer therein using the page-footer option's left, right, center suboptions. This creates the HTML like this:

<footer class="footer">
  <div class="nav-footer">
    <div class="nav-footer-left">left</div>   
    <div class="nav-footer-center">center</div>
    <div class="nav-footer-right">right</div>
  </div>
</footer>

Just for the sake of it, I was fiddling with CSS and found that I am not able to set the height of .nav-footer-left, etc. contents using the percentage notation, like so:

.nav-footer-left {
    height: 200%;
}

However, I am able to set it via pixels.

Why is it so? (I had a long look at the generated Bootsrap CSS files, but that didn't help.)

[cderv]

I would say pixel is an absolute unit, and % is a relative one. So 200% needs to apply on something and it could be limited too.

Also know that footer is a Flex element

quarto-cli/src/resources/projects/website/navigation/quarto-nav.scss

Lines 763 to 775 in 167c748

	.nav-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	text-align: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	@if variable-exists(footer-bg) {
	background-color: $footer-bg;
	}
	}

So you need to understand how that works (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or remove the flex CSS

Hope it helps

[mcanouil]

In addition, be aware that relatives units are to the parent element.
If the parent element has no absolute dimensions, the child element can't have relative dimensions.
Usually body has no height or weight.

This is why Quarto defined a big div inside body, in order to be able to have relative dimensions elements in it, for example to make grids.