piffy

CSS Overflow

Jan 2nd, 2021
657
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width">
  6.     <title>Overflow</title>
  7.       <style>
  8.         div {
  9.              border:1px solid black;
  10.              height : 100px;
  11.              width : 300px;
  12.              padding : 15px;
  13.             }
  14.  
  15.         div#visible {
  16.              overflow : visible;
  17.             }
  18.  
  19.         div#auto {
  20.              overflow : auto;
  21.             }
  22.  
  23.         div#hidden {
  24.              overflow : hidden;
  25.             }
  26.         div#scroll {
  27.              overflow : scroll;
  28.             }
  29.       </style>
  30.   </head>
  31. <body>
  32. <h4>Scroll - scorrimento sempre visibile</h4>
  33. <div id="scroll">
  34. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  35. </div>
  36. <br/>
  37. <h4>Hidden- traboccamento nascosto</h4>
  38. <div id="hidden">
  39. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  40. </div>
  41. <br/>
  42. <h4>Visible - traboccamento visibile</h4>
  43. <div id="visible">
  44. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  45. </div>
  46.  
  47.  
  48. </body>
  49. </html>
RAW Paste Data