I'm using css position:sticky and I have Header sticky element in the root and a sticky dt element for each section inside dl element.
But currently dt element overflow header element when stuck. Is there a pure css way to make dt elements stuck below header if we don't know header height? Header content is dynamic, it might wrap on window width change.
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px 12px;
color: white;
font-size: 20px;
border: 1px solid #6783fc;
background-color: #3c5fe8;
}
dl > div {
padding: 24px 0 0 0;
background: #FFF;
}
dt {
position: -webkit-sticky;
position: sticky;
top: -1px;
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC;
}<div class="header">
Header
</div>
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
</dl>