10.11.2017, 13:18
|
 |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 217
|
|
Nexus,
|
Сообщение от Nexus
|
|
2. .wrp является потомком .wrapper.
|
.wrp является потомком .wrapper, но не прямым, т.е. .wrp идет не сразу после .wrapper. Но у остальных блоков нет ни маргинов, ни паддингов. И тем не менее, из-за этого может быть и не работает (сейчас попробовал)?
рони,
так вот же мы в скрипте и указываем
calc(108px - 50vw);}
Так а почему же появляется нижняя полоса прокрутки? Обратите внимание, слева небольшое расстояние, так понимаю, из-за него же она и появляется. Откуда она берется?
|
|
10.11.2017, 13:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от LADYX
|
так вот же мы в скрипте и указываем
calc(108px - 50vw);}
|
не могли бы вы пояснить что здесь указано? |
|
10.11.2017, 13:28
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
|
Сообщение от рони
|
|
не могли бы вы пояснить что здесь указано?
|
Какие-то 108px минус 50% ширины viewport'а.
Что такое "108px" тоже интересно.
Ps. 108px - это .wrp width (100px) + scrollbar width (16px) *.5
Последний раз редактировалось Nexus, 10.11.2017 в 13:38.
|
|
10.11.2017, 13:42
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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;
}
</style>
</head>
<body>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var scrollWidth = window.innerWidth - document.documentElement.clientWidth ;
var x = ".wrp{ width: calc(100vw - "+scrollWidth+"px); margin: 0 calc("+(scrollWidth/2)+"px - 50vw) 0 calc(100% + "+(scrollWidth/2)+"px - 50vw);}";
var style = document.createElement('style');
style.textContent = x;
document.querySelector("head").appendChild(style);
});
</script>
</body>
</html>
Последний раз редактировалось рони, 10.11.2017 в 13:47.
|
|
10.11.2017, 13:45
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 217
|
|
ну да, я так понимаю, 8 - это половина ширины полосы прокрутки, ну так же?
|
Сообщение от LADYX
|
|
из-за этого может быть и не работает
|
Прошу меня простить. И этот вариант работает. Это моя ошибка. Просто у меня блок .wrp идет не класс, а ид. И мне нужна было в скрипте указать не
$('.wrp')
а
$('#wrp')
Это моя невнимательность, простите. Всё работает, как нужно.
Nexus,
рони,
Огромное спасибо! |
|
10.11.2017, 13:46
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
рони,
|
Сообщение от рони
|
|
calc("+(100+scrollWidth/2)+"px - 50vw);
|
Лучше так:
calc(100% + "+(scrollWidth/2)+"px - 50vw);
|
|
10.11.2017, 13:48
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 217
|
|
|
рони,
последний ваш пост - тоже очень интересный вариант, обязательно заберу себе его в блокнот.
рони,
Nexus,
ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!
|
|
10.11.2017, 13:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Nexus,
заменил
|
|
10.11.2017, 14:06
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
Немного изменил генерируемый css.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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;
}
</style>
</head>
<body>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var scrollWidth = window.innerWidth - document.documentElement.clientWidth ;
var x = '.wrp{'
+'width: calc(100vw - '+scrollWidth+'px);'
+'margin-left:calc(-.5 * (100vw - '+scrollWidth+'px) + 100%);'
+'}';
var style = document.createElement('style');
style.textContent = x;
document.querySelector("head").appendChild(style);
});
</script>
</body>
</html>
Тут можно ширину окна изменить рил тайм:
https://jsfiddle.net/j2e6pL1t/
PS. Если изменить ширину .wrapper, то работает неправильно.
Последний раз редактировалось Nexus, 10.11.2017 в 14:15.
|
|
|
|
