Добрый день!
У меня есть вот такая разметка. С помощью стиля высчитывается ширина полосы прокрутки (за основу берется 16px как у большинства браузерах). Но как мы знаем, в редких и мобильных браузерах ширина полосы прокрутки может колебаться от 14px до 18px, а кое-где быть даже равна нулю.
Скажите, пожалуйста, а как можно с помощью скрипта высчитывать полосу прокрутки и этим же скриптом уже корректировать стиль (margin и width) для блока .wrp?
Спасибо!
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
background-color: burlywood;
text-align: justify;
margin: 0 auto;
width: 200px;
padding: 0 100px 0 0;
}
.wrp {
background-color: chocolate;
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0 calc(8px - 50vw) 0 calc(108px - 50vw);
width: calc(100vw - 16px);
}
</style>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>