1

Как сделать, чтобы вместо полосы прокрутки, отмеченной на скриншоте красными стрелками, была только отмеченная зеленой стрелкой? Чтобы только она прокручивала, и можно было спускаться вниз и читать текст полностью?

Скриншот экрана

Вот код:

.header {
  background-color: #4D7198;
  border-bottom: 1px solid grey;
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.9;
}

.logo {
  margin-top: 10px;
  margin-left: 20px;
}

.table {
  margin-top: 100px;
  width: 15%;
  height: 85%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #a1a336;
  opacity: 0.8;
  height: 100%;
  position: absolute;
}

.button1 a {
  float: right;
  margin-top: -60px;
  margin-right: 125px;
  background-color: none;
  border: 2px solid white;
  border-radius: 4px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

.button1 a:hover {
  background-color: white;
  color: #4D7198;
  transition: all 0.5s;
}

.button2 a {
  float: right;
  margin-top: -60px;
  margin-right: 20px;
  background-color: none;
  border: 2px solid white;
  border-radius: 4px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

.button2 a:hover {
  background-color: white;
  color: #4D7198;
  transition: all 0.5s;
}

li {
  color: white;
}

li:hover {
  color: red;
}

.body {
  background-color: white;
  right: 0;
  top: 0;
  margin-top: 100px;
  width: 85%;
  height: 100%;
  position: absolute;
  opacity: 0.8;
  font-size: 20px;
}

.footer {
  background-color: #a1a336;
  height: 30%;
  margin-top: 530px;
  width: 85%;
  right: 0;
  position: fixed;
  height: 100%;
  opacity: 0.8;
}

.pravo {
  color: white;
  margin-top: 30px;
}

* {
  overflow: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Тестовая страница</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <div class="logo">
        <img src="images/logo.png" width="80px" height="80px"></img>
        <div class="button1">
          <a href="reg.html">Вход</a>
        </div>
        <div class="button2">
          <a href="reg.html">Регистрация</a>
        </div>
      </div>
    </div>
    <div class="right table">
      <div class="right list">
        <ul>
          <li>Ето тип 1 меню</li>
          <li>Ето тип 2 меню</li>
          <li>Ето тип 3 меню</li>
          <li>Ето тип 4 меню</li>
          <li>Ето тип 5 меню</li>
          <li>Ето тип 6 меню</li>
        </ul>
      </div>
    </div>
    <div class="body">
      Тут текст
    </div>
    <div class="footer">
      <div class="text pravo">
        © 2017 - 2019 | Авторское право
      </div>
    </div>
  </div>
</body>

</html>

2
  • с помощью css никак
    – Юрий
    20 июл 2019 в 4:54
  • @Юрий, ещё как, всё, что находится "поверх" этого текста - position: fixed; и получается, что вы крутите контент, который находится в диапазоне этого текста
    – meine
    15 мар 2020 в 18:22

1 ответ 1

1

Подправил стили - вырезал много лишнего:

* { box-sizing: border-box; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  border-bottom: 1px solid grey;
  background-color: #4D7198;
}

.logo { margin-top: 10px; margin-left: 20px; }

.button1 a,
.button2 a {
  float: right;
  margin-top: -60px;
  padding: 5px;
  border: 2px solid white;
  border-radius: 4px;
  color: white;
  background-color: #fa0;
  text-decoration: none;
}
.button1 a:hover,
.button2 a:hover {
  color: #4D7198;
  background-color: white;
  transition: all 0.5s;
}
.button1 a { margin-right: 125px; }
.button2 a { margin-right: 20px; }

.table {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 100px;
  height: 100%;
  width: 15%;
  background-color: #a1a336;
}

li { color: white; }
li:hover { color: red; }

.body {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 85%;
  padding: 110px 10px 50px 10px;
  font-size: 20px;
  background-color: white;
  text-align: justify;
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 40px;
  width: 85%;
  background-color: #a1a336;
}

.pravo { margin: 10px auto; color: white; }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Тестовая страница</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <div class="logo">
        <img src="images/logo.png" width="80px" height="80px"></img>
        <div class="button1">
          <a href="reg.html">Вход</a>
        </div>
        <div class="button2">
          <a href="reg.html">Регистрация</a>
        </div>
      </div>
    </div>
    <div class="right table">
      <div class="right list">
        <ul>
          <li>Ето тип 1 меню</li>
          <li>Ето тип 2 меню</li>
          <li>Ето тип 3 меню</li>
          <li>Ето тип 4 меню</li>
          <li>Ето тип 5 меню</li>
          <li>Ето тип 6 меню</li>
        </ul>
      </div>
    </div>
    <div class="body">
      <h3>Как бы то ни было, современная методология разработки разочаровала</h3>
      <p>Современные технологии достигли такого уровня, что постоянное информационно-пропагандистское обеспечение нашей деятельности однозначно определяет каждого участника как способного принимать собственные решения касаемо экспериментов, поражающих по
        своей масштабности и грандиозности. Непосредственные участники технического прогресса представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть в равной степени предоставлены сами себе. А ещё многие известные
        личности и по сей день остаются уделом либералов, которые жаждут быть функционально разнесены на независимые элементы. Как принято считать, многие известные личности, вне зависимости от их уровня, должны быть представлены в исключительно положительном
        свете. Идейные соображения высшего порядка, а также высококачественный прототип будущего проекта представляет собой интересный эксперимент проверки экспериментов, поражающих по своей масштабности и грандиозности.</p>

      <p>В целом, конечно, постоянное информационно-пропагандистское обеспечение нашей деятельности способствует повышению качества поставленных обществом задач. Внезапно, сторонники тоталитаризма в науке набирают популярность среди определенных слоев населения,
        а значит, должны быть заблокированы в рамках своих собственных рациональных ограничений. В рамках спецификации современных стандартов, реплицированные с зарубежных источников, современные исследования, превозмогая сложившуюся непростую экономическую
        ситуацию, разоблачены. Равным образом, дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития.</p>

      <p>Каждый из нас понимает очевидную вещь: консультация с широким активом способствует повышению качества прогресса профессионального сообщества. Задача организации, в особенности же реализация намеченных плановых заданий выявляет срочную потребность
        распределения внутренних резервов и ресурсов. В своём стремлении улучшить пользовательский опыт мы упускаем, что тщательные исследования конкурентов функционально разнесены на независимые элементы. Разнообразный и богатый опыт говорит нам, что
        понимание сути ресурсосберегающих технологий требует анализа приоритизации разума над эмоциями. Учитывая ключевые сценарии поведения, сплочённость команды профессионалов создаёт предпосылки для новых предложений.</p>

      <p>Кстати, некоторые особенности внутренней политики функционально разнесены на независимые элементы. Предварительные выводы неутешительны: курс на социально-ориентированный национальный проект однозначно определяет каждого участника как способного
        принимать собственные решения касаемо вывода текущих активов. Высокий уровень вовлечения представителей целевой аудитории является четким доказательством простого факта: глубокий уровень погружения способствует повышению качества переосмысления
        внешнеэкономических политик. Задача организации, в особенности же сложившаяся структура организации однозначно определяет каждого участника как способного принимать собственные решения касаемо укрепления моральных ценностей.</p>

      <p>Предварительные выводы неутешительны: внедрение современных методик требует определения и уточнения поэтапного и последовательного развития общества. Значимость этих проблем настолько очевидна, что постоянное информационно-пропагандистское обеспечение
        нашей деятельности предопределяет высокую востребованность поставленных обществом задач. Вот вам яркий пример современных тенденций - перспективное планирование создаёт предпосылки для поэтапного и последовательного развития общества.</p>
      <i>Текст сгенерирован на fish-text.ru.</i>
    </div>
    <div class="footer">
      <div class="text pravo">
        © 2017 - 2019 | Авторское право
      </div>
    </div>
  </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.