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

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 то, что мне нужно... но как они это сделали понять пока не могу...

Вопрос задан более года назад
197 просмотров

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

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 4 часа назад
- 38 просмотров
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 6 часов назад
- 34 просмотра
0

ответов
HTML

Простой
Как выставить фото в select?
- 1 подписчик
- 8 часов назад
- 56 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 21 час назад
- 83 просмотра
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- вчера
- 94 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- вчера
- 34 просмотра
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- вчера
- 54 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- вчера
- 62 просмотра
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработать функционал загрузки прайсов в БД

27 апр. 2024, в 20:40

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

Нужно помощь со скроллом в горизонтальном меню

27 апр. 2024, в 20:37

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

Парсер-робот под Desktop Windows на C# или .NET или WPF

27 апр. 2024, в 20:22

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

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) скролл "поверх" блока, как на тач девайсах. там вашу задачу решать вообще не надо, скролл и так будет сверху.

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

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

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

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