html отображение файла внизу - PullRequest
Новая
       0

html отображение файла внизу

1 голос
/ 30 мая 2020

Я добавил на свою HTML страницу содержимое файла журнала, поэтому, когда в файле журнала много строк, на моей веб-странице есть полоса прокрутки.

Я пытаюсь отобразить свою веб-страницу с помощью полоса прокрутки в нижней позиции с этим кодом, но ничего не происходит: 

<html>
  <header>
    <meta charset="utf-8">
    <title>Plannificateur</title>
    <style>
    p1  {
      font-size: 130%;
    }
    p2  {
      font-size: 80%;
    }
    </style>
  </header>
  <body>
    <form action="" method="POST">
    <h1>Liste</h1>
      <!-- DERNIER_UTILISATEUR -->
    </form>
    <br><br><br><br>
    <hr>
    <h3>Journal des évènements</h3>
    <script language="javascript" type="text/javascript">
        document.getElementById('log').scrollIntoView();
    </script>
    <div id='log'>
        <object data="log.txt" style="width:100%;"></object>
    </div>
  </body>
</html>

Вы знаете, почему он не работает?

1 Ответ

0 голосов
/ 30 мая 2020

Горизонтальную полосу прокрутки и Вертикальную полосу прокрутки можно легко добавить с помощью комбинации этих 3 CSS атрибутов:

  • overflow / overflow-x / overflow-y (Показывать полосу прокрутки, когда содержимое выходит за пределы определенных полей)
  • max-width (определять максимальную ширину)
  • max-height (максимальная высота)

Вот пример отображения горизонтальных и вертикальных полос прокрутки: 

<html>
  <head>
    <meta charset="utf-8">
    <title>Plannificateur</title>
    <style>
    .log-file-viewer {
        max-width: 110px;
        height: 110px;
        overflow: scroll;     --> shows scrollbar


             --- Other options for specifying scroll ---

        overflow-x: scroll;
        overflow-y: scroll;
    }
    </style>
  </head>
  <body>
    <div id="log" class="log-file-viewer">
        Log file contents here .....
        <br>
        Line 1: Hello! How are you doing? Hello! How are you doing?Hello!How are you doing?Hello! How are you doing?Hello! How are you doing?Hello! How are you doing?
        <br>
        Line 2: Hello! How are you doing? Hello! How are you doing?Hello! How are you doing?Hello! How are you doing?Hello! How are you doing?Hello! How are you doing?
    </div>
  </body>
</html>

Выход:

enter image description here

Дополнительная информация:

https://www.w3schools.com/cssref/pr_pos_overflow.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...