by
4,027 19
1
5
2,206
2
Top 1% !
Famous
Easy-to-find
Specified
OpenSource
Popularity: 10020th place

Published on:

Languagecss
Languagescss
LicenseMIT_X11

Matching Height - using CSS @element query

A simple elegant solution to matching element heights using the @element query.
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1519070/Matching-Height---using-CSS--element-que?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
// Some html setup required /* <div id=thing1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, temporibus consequuntur velit dolor! Eos animi molestias found here <a href="http://codepen.io/tomhodgins/pen/yadeXV"> thanks Tommy </a>aliquid eum error officiis vel et saepe a facilis, voluptate dignissimos nam assumenda, deleniti.</div> <div id=thing2>This one doesn't have as much text as id=thing1… so it's set to 100eh, or 100 element height units for #thing1, which makes it the same height.</div> */ div { margin: 1em 0; width: 50%; float: left; color: black; background: lime; } #thing2 { background: red; } @element '#thing1' { #thing2 { height: 100eh; } }
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus