/pub/test/583.html

https://gitlab.com/Rockyspade/hail2u.net · HTML · 66 lines · 57 code · 9 blank · 0 comment · 0 complexity · 2a69c81994f3d691fdb3ac1055cf1f72 MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>Expand pre Background #2</title>
  7. <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
  8. <style>
  9. .test pre {
  10. margin-right: auto;
  11. margin-left: auto;
  12. position: relative;
  13. max-width: 480px;
  14. background-color: rgba(0,0,0,0.1);
  15. box-sizing: border-box;
  16. }
  17. .test pre:before,
  18. .test pre:after {
  19. display: block;
  20. position: absolute;
  21. top: 0;
  22. width: calc((100vw - 100%) / 2);
  23. height: 100%;
  24. content: "";
  25. background-color: #f0f;
  26. }
  27. .test pre:before {
  28. right: 100%;
  29. }
  30. .test pre:after {
  31. left: 100%;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <header>
  37. <h1>Expand pre Background #2</h1>
  38. <p><code>calc()</code>を使って真ん中寄せにした<code>pre</code>要素の余った余白を塗り潰すスクロールバーの有無に対応できない</p>
  39. </header>
  40. <section class="test">
  41. <pre>&lt;script type=&quot;text/javascript&quot;&gt;
  42. // Say hello world until the user starts questioning
  43. // the meaningfulness of their existence.
  44. function helloWorld(world) {
  45. for (var i = 42; --i &gt;= 0;) {
  46. alert(&#39;Hello &#39; + String(world));
  47. }
  48. }
  49. &lt;/script&gt;
  50. &lt;style&gt;
  51. p { color: pink }
  52. b { color: blue }
  53. u { color: &quot;umber&quot; }
  54. &lt;/style&gt;</pre>
  55. </section>
  56. </body>
  57. </html>