Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 10.11.2017, 13:18
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Nexus,
Сообщение от Nexus
2. .wrp является потомком .wrapper.
.wrp является потомком .wrapper, но не прямым, т.е. .wrp идет не сразу после .wrapper. Но у остальных блоков нет ни маргинов, ни паддингов. И тем не менее, из-за этого может быть и не работает (сейчас попробовал)?
рони,
Сообщение от рони
где???
так вот же мы в скрипте и указываем
calc(108px - 50vw);}

Так а почему же появляется нижняя полоса прокрутки? Обратите внимание, слева небольшое расстояние, так понимаю, из-за него же она и появляется. Откуда она берется?
Ответить с цитированием
  #12 (permalink)  
Старый 10.11.2017, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Сообщение от LADYX
так вот же мы в скрипте и указываем
calc(108px - 50vw);}
не могли бы вы пояснить что здесь указано?
Ответить с цитированием
  #13 (permalink)  
Старый 10.11.2017, 13:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,684

LADYX,
Тут нет зависимости от родителей:
https://jsfiddle.net/3m91ubrg/1/
Ответить с цитированием
  #14 (permalink)  
Старый 10.11.2017, 13:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,684

Сообщение от рони
не могли бы вы пояснить что здесь указано?
Какие-то 108px минус 50% ширины viewport'а.

Что такое "108px" тоже интересно.

Ps. 108px - это .wrp width (100px) + scrollbar width (16px) *.5

Последний раз редактировалось Nexus, 10.11.2017 в 13:38.
Ответить с цитированием
  #15 (permalink)  
Старый 10.11.2017, 13:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052


<!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.
Ответить с цитированием
  #16 (permalink)  
Старый 10.11.2017, 13:45
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Сообщение от LADYX
108px
ну да, я так понимаю, 8 - это половина ширины полосы прокрутки, ну так же?
Сообщение от LADYX
из-за этого может быть и не работает
Прошу меня простить. И этот вариант работает. Это моя ошибка. Просто у меня блок .wrp идет не класс, а ид. И мне нужна было в скрипте указать не
$('.wrp')

а
$('#wrp')

Это моя невнимательность, простите. Всё работает, как нужно.
Nexus,
рони,
Огромное спасибо!
Ответить с цитированием
  #17 (permalink)  
Старый 10.11.2017, 13:46
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,684

рони,
Сообщение от рони
calc("+(100+scrollWidth/2)+"px - 50vw);
Лучше так:
calc(100% + "+(scrollWidth/2)+"px - 50vw);
Ответить с цитированием
  #18 (permalink)  
Старый 10.11.2017, 13:48
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
последний ваш пост - тоже очень интересный вариант, обязательно заберу себе его в блокнот.

рони,
Nexus,
ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!
Ответить с цитированием
  #19 (permalink)  
Старый 10.11.2017, 13:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Nexus,
заменил
Ответить с цитированием
  #20 (permalink)  
Старый 10.11.2017, 14:06
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,684

Немного изменил генерируемый 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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseup нa кнопке полосы прокрутки dadli Общие вопросы Javascript 0 30.06.2012 12:45
div в конец полосы прокрутки vladimircape Events/DOM/Window 1 03.05.2012 03:11
Как получить ширину html элемента?(возвращает NaN или auto) manking Общие вопросы Javascript 2 23.03.2012 13:17
Создание с помощью скрипта html элемента Anastasiya Общие вопросы Javascript 4 25.10.2011 22:28
как прекратить выполнение скрипта ? kefi Общие вопросы Javascript 3 31.03.2009 19:05