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

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

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

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 подписчик
- 6 часов назад
- 42 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 17 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 72 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 102 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 94 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 91 просмотр
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

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

3д сцены

23 дек. 2024, в 04:30

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

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

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

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

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

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

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