添加滚动条到html


Add scrollbar to html

我有一个弹出窗口,与以下源代码("喜欢。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>

现在的问题是,虽然所有的段落已经创建,我不能看到他们,因为没有滚动条。如何将滚动条附加到页面上?

链接到printscreen

它是在chrome上工作,但不是在firefox 如果它出现在一个弹出窗口(其他文件调用window.open("like .php")。

使用css overflow属性。将此添加到您的<head>标签:

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

要特别添加水平或垂直滚动条,分别使用overflow-xoverflow-y

您还需要修复<li>元素的结束标记,并将其包装在合适的容器中,如

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

要控制溢出,通常需要使用CSS overflow属性

overflow: scroll

如p.s.w.g.所述,,但你永远不需要像(s)他建议的那样将其应用于整个身体。如果你的代码格式正确,浏览器应该在整个页面上添加一个滚动条。

当前的问题可能是由于您没有关闭第二个<li>标记和PHP格式不正确造成的。你不需要在每行的末尾休息。行没有断行的原因是您没有将<li>元素包含在<ol><ul>中。此外,将if语句的开头、填充符和结尾放在单独的php标签中只会混淆计算机。而不是使用:

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