Как отделить блок линией?

Question

Stas2020 @Stas2020

HTML
CSS

Как отделить блок линией?

Добрый день!

Есть основной div со стилизованной полосой прокрутки. В этом div есть ещё один, в котором ещё два - содержание и подвал. Подскажите, как сделать так, чтобы эти два div были разделены линией (background-color, border - не важно), но таким образом, чтобы линия была во весь экран, т.е. заходила под полосу прокрутки?

<div id="wraper">
  <div id="wr_content">
    <div id="content">
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
      <p>содержание</p>
    </div>
  <div id="footer">подвал</div>
 </div>
</div>

Стили:

*{
margin:0;
padding:0;
box-sizing:border-box;}

::-webkit-scrollbar{width:auto;}
::-moz-scrollbar{width:auto;}
::-ms-scrollbar{width:auto;}
::-o-scrollbar{width:auto;}

::-webkit-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-moz-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-ms-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-o-scrollbar-thumb{background:rgba(255,255,105,0.5);}

::-webkit-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-moz-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-ms-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-o-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}

#wraper{
position:absolute;
width:100%;
height:100%;
overflow-y:scroll;
background-color:blue;}

#wr_content{
position:absolute;
width:100%;
height:78%;
top:22%;}

#content{
background-color:blue;}

#footer{
height:15%;
background-color:blue;}

Если честно - всю голову себе сломал и уже даже немного сдался, решив что единственное, что можно придумать - это расположить под основным блоком "копию" этого блока и через js прокручивать эту "копию" одновременно с основным блоком. Но тут случайно увидел на мобильной версии mail.ru то, что мне нужно... но как они это сделали понять пока не могу...

Вопрос задан более двух лет назад
274 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 3

9 комментариев

Stas2020 @Stas2020 Автор вопроса

Проблема не в стилях и не в теге.
Проблема в том, что 100% ширины блока wr_content = 100% ширины блока wraper - ширина его полосы прокрутки.

В итоге, получается вот так:

Если устанавливать тегу или блоку внутри блока wr_content ширину как 100vw, то эти 100vw переполняют wr_content, но не "доходят" до конца окна через полосу прокрутки на блока wraper.

Написано более двух лет назад
Noder SS @noder_ss

Попробуйте сделать минусовой отступ, увеличив ширину линии с помощью width

Написано более двух лет назад

Noder SS @noder_ss

Stas2020, Должно быть, как-то так

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr class="hr">
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        overflow-x: hidden;
    }
    body{
        height: 1000px;
    }
    .hr{

 width: 200%; margin-right: -50%;
margin-top: 20px;
    }

</style>
</html>

Высоту боди и margin-top у линии можете убрать при вставке в код, я сделал для того, чтобы было видно

Написано более двух лет назад

Сергей delphinpro @delphinpro Куратор тега CSS

Stas2020, кто или что вам мешает сделать ширину больше?

calc(100% + var(--scroll-width))
--scroll-width подсчитывается скриптом и пишется в кастомное свойство. Потом используется в css.

Написано более двух лет назад
Stas2020 @Stas2020 Автор вопроса

Сергей delphinpro, сделать больше ширину чего?

Если тега hr или div, который находится внутри wr_content, то он переполнит wr_content, но под полосу прокрутки wraper так и не зайдет.

Написано более двух лет назад
Stas2020 @Stas2020 Автор вопроса

Ростик Кальченко, к сожалению, результат тот же:

Написано более двух лет назад
Noder SS @noder_ss

Stas2020, а у вас точно линия, по которой скользит полоска прозрачная? Должно работать.

Написано более двух лет назад

Stas2020 @Stas2020 Автор вопроса

Ростик Кальченко, 100%.

::-webkit-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-moz-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-ms-scrollbar-thumb{background:rgba(255,255,105,0.5);}
::-o-scrollbar-thumb{background:rgba(255,255,105,0.5);}

::-webkit-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-moz-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-ms-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}
::-o-scrollbar_thumb:windows-inactive{background:rgba(255,255,105,0.3);}

Написано более двух лет назад

Noder SS @noder_ss

Попробуйте с помощью transperent, opacity или просто rgba прозрачностью, она под ней по факту, я ж отступ отминусовал, должно быть так

Написано более двух лет назад

Комментировать

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- час назад
- 29 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- час назад
- 44 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 8 часов назад
- 76 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 30 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 98 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

VPN приложение на Android

22 нояб. 2024, в 19:15

200000 руб./за проект

Разработать скрипт-парсер для новостного сайта

22 нояб. 2024, в 18:50

30000 руб./за проект

Требуется разработчик Telegram-бота для анализа звонков продаж

22 нояб. 2024, в 18:45

10000 руб./за проект

Answer 1 · 2022-10-29 12:06:55

Noder SS @noder_ss

Линуксоид-энтузиаст и SQL разработчик

Поставьте между ними тег HR, если стили не подходят, почитайте, как его стилизовать на htmlbook

Ответ написан более двух лет назад

9 комментариев

Answer 2 · 2022-10-29 17:28:09

Можно border-bottom, но я бы лучше взялбы и стилизовал тег там где нужны эти линии.js тут точно ненужен

Answer 3 · 2022-10-31 12:45:29

Так и не понял, вам на десктопе или на мобильных (точнее на тач устройствах)?
Т.к. видов скролла два:
1) привычный "дектопный", который часть вьюпорта отъедает. Под него вы ничего не сунете. Только если использовать скриптовый скролл вместо него, тогда да.
2) скролл "поверх" блока, как на тач девайсах. там вашу задачу решать вообще не надо, скролл и так будет сверху.

Как отделить блок линией?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт