column-contain-2.html (1344B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <title>CSS Test: Sticky Positioning - multiframe containing-block element</title> 7 <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> 8 <link rel="match" href="column-contain-2-ref.html"> 9 <meta name="assert" content="Sticky positioning where the containing-block element has multiple frames and border/padding should stay contained within the union of the content boxes of all frames"> 10 <style> 11 #scroll { 12 overflow: hidden; 13 height: 200px; 14 line-height: 1; 15 } 16 #columns { 17 column-count: 2; 18 column-rule: 1px solid black; 19 height: 200px; 20 width: 200px; 21 } 22 #contain { 23 padding-bottom: 10px; 24 border-bottom: 10px solid gray; 25 } 26 #fill { 27 height: 370px; 28 background: blue; 29 } 30 #sticky { 31 position: sticky; 32 top: 195px; 33 width: 10px; 34 height: 10px; 35 background: black; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="scroll"> 41 <div id="columns"> 42 <div id="contain"> 43 <div id="sticky"></div> 44 <div id="fill"></div> 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>