css-examples/learn/overflow/scroll.html at 8b1ec341fa45b11fcabfdea0e320bb62cd4e38e2 · mdn/css-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Overflow: scroll</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>

    </style>

    <style class="editable">
      .box {
        border: 1px solid #333333;
        width: 200px;
        height: 100px;
        overflow: scroll;
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
    </section>

    <textarea class="playable playable-css" style="height: 120px;">
.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 140px;">
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>