Menu
I am trying to make something akin to the side-menu on this website. I am currently experiencing a problem with the height of the #parent list element, since I would like it to be of the exact same height as that of its content (the #child span - see this jsfiddle).
<body>
<article class="full-height row">
<nav id="nav-container" class="full-height row col-sm-3">
<div class="col-sm-4 full-height"></div>
<ul id="nav-button" class="col-sm-8 full-height vcenter">
<li class="vcentered active"><span class="fontastic">0</span></li>
</ul>
<ul id="nav-navbar" class="col-sm-8 full-height display-none">
<li>Projects</li>
<li>Passions</li>
<li>Close</li>
</ul>
</nav>
<section>
</section>
<canvas class="full-height"></canvas>
</article></body>
The #child element does not have any css positioning specified, nor does it have a z-index or float property, hence it should not be removed from its context. I don't understand why the #child element is taller than its #parent.
This was performed under Chrome 39.0.2171.95 m
Thanks for your answers!
387
Live demo
The reason for the child to be taller than the parent is that the font class fontastic has line-height = 1. In other words the child is telling the parent my line height is 1, but in fact it's is taking more. To fix this, you can set line-height = 1.2
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
