Add scrollbar to html

Question

I have a popup window that with the following source code ("likes.php"):

<!DOCTYPE html>

<html>

<head>

    <title>Like</title>

  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

</head>

<body>

<ol>

    <?php for($i=0;$i<500;$i++){ ?>

    <li><p><?php echo $i ?></p></li>

    <?php } ?>

</ol>

</body>

</html>

Now the problem is that although all the paragraphs are created, I can't see them, because there is no scrollbar. How can I attach a scrollbar to my page?

Link to printscreen

It is working on chrome, but not in firefox IF it comes in a popup window (other file calls window.open("likes.php"). Works in both browsers in regular windows.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Use the css overflow property. Add this to your <head> tag:

<style type="text/css">
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  } 
  .scroller {
    overflow: scroll;
    padding: 5px;
    height: 100%;
  }
</style>

To specifically add a horizontal or vertical scrollbar, use overflow-x or overflow-y, respectively.

You'll also want to fix the close tag of your <li> element, and wrap it in a proper container, like this

<div class="scroller">
  <ul>
    <?php for($i=0;$i<500;$i++)
              echo "<li>".$i."</li>";
    ?>
  </ul>
</div>

Add scrollbar to html

Sign up