Как убрать скачок страницы с полосой прокрутки? - HTML и CSS

shavedcat · 27.02.2014, 19:53

В сайте несколько страниц. Одни умещаются на экран целиком, другие требуют полосы прокрутки (вертикальной).

На этих "длинных" страницах происходит скачок на размер ползунка (страница отскакивает влево на размер ползунка прокрутки появляющегося справа экрана монитора).

По началу я даже не понял связи и шерстил код пока пар из ушей не пошел.

Сайт располагается посередине экрана.
margin: auto;
position: relative;

Помогите пожалуйста советом как избежать скачка.
Буду очень признателен.
Спасибо!

MaTBeu · 27.02.2014, 20:34

Пример работы есть? Может быть все, что угодно

Lime · 28.02.2014, 10:20

Пример vk.com )
вне зависимости от наличия ползунка прокрутки, координаты центральной колонки не меняются.

shavedcat · 05.03.2014, 04:52

Выглядит примерно так:

tester69.esy.es

MaTBeu · 05.03.2014, 13:02

Где проблема? Код показывайте

shavedcat · 05.03.2014, 21:03

Page_01

Код HTML:

<div id="wrapper">
    		<div id="navigation_bkg">		
     			<div id="navigation">
        			<ul>
            		<li class="inactive">TEST 01</li>
           			<li><a href="index_test_02.html">TEST 02</a></li>
            		</ul>
            	</div> <!--closes navigation-->
            </div> <!--closes navigation_bkg-->
    		  
  
   				<div id="content_index">
   
        		</div><!--closes_content_index-->
        
	</div><!--closes wrapper-->

Page_02

Код HTML:

<body>

	<div id="wrapper">
    		<div id="navigation_bkg_2">
     			<div id="navigation">
        			<ul>
            		<li><a href="index_test_01.html">TEST 01</a></li>
           			<li class="inactive">TEST 02</li>
            		</ul>
            	</div> <!--closes navigation-->
    		</div> <!--closes navigation_bkg-->
            
   				<div id="content_index">
   
        		</div><!--closes_content_index-->
        
	</div><!--closes wrapper-->

</body>

CSS

Код HTML:

html
{
	width: 100%;
	font-family: Verdana, Geneva, sans-serif;
	font-size:10pt;
	background-color: #FFF;
}


#wrapper
{
	width: 960px;
	margin: auto;
	position: relative;
	background-color: white;
	color: #FFF;
}


#navigation
{
	float: left;
	width: 200px;
	background-color: #540101;
}

#navigation_bkg
{
	float: left;
	width: 200px;
	height: 420px;
	background-color: #540101;
}

#navigation_bkg_2
{
	float: left;
	width: 200px;
	height: 1420px;
	background-color: #540101;
}

#navigation_2
{
	float: left;
	width: 200px;
	height: 1421px;
	background-color: #540101;
}


#navigation ul
{	margin-left: 20px;
	margin-top: 140px;
	width:170px;
}

#navigation li
{	
	
	margin-top: 20px;
}

#navigation ul li a
{
	text-decoration: none;
	font-size: 10pt;
	color: #FFE6C7;
	
}

#navigation ul li a:hover, #navigation ul li a.current 
{
	color: #7f7f7f;
}

#content_index
{
	float: left;
	margin-left: 20px;
	width: 720px;
	margin-top: 20px;
}

Naive · 05.03.2014, 22:07

Код:

body {
  overflow: scroll;
}

либо правое поле в 19px для нескролящихся страниц, но я бы не парился из-за этого: пока браузер будет рисовать страницу и грузить картинки, никто не заметит разницы

shavedcat · 05.03.2014, 22:58

Да, мне на другом сайте сразу посоветовали сделать scroll на всех страницах.

Просто думал что есть что-то более технически правильное. Это скорее выглядит уловкой :-)

Виталий Желтяков · 05.03.2014, 23:06

Сделайте постоянную видимость scroll и не мучайтесь

Naive · 06.03.2014, 00:00

я против этого[scroll], это некрасиво. Оставь эти вещи решать браузеру.

27.02.2014, 19:53	#1
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Как убрать скачок страницы с полосой прокрутки? В сайте несколько страниц. Одни умещаются на экран целиком, другие требуют полосы прокрутки (вертикальной). На этих "длинных" страницах происходит скачок на размер ползунка (страница отскакивает влево на размер ползунка прокрутки появляющегося справа экрана монитора). По началу я даже не понял связи и шерстил код пока пар из ушей не пошел. Сайт располагается посередине экрана. margin: auto; position: relative; Помогите пожалуйста советом как избежать скачка. Буду очень признателен. Спасибо!

06.03.2014, 00:00	#10
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	я против этого[scroll], это некрасиво. Оставь эти вещи решать браузеру. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как убрать GET-параметры из адреса страницы	Антон Ос	PHP	4	08.06.2013 05:10
как убрать полосу прокрутки в фрейме ?	admin-one	Работа с сетью в Delphi	11	15.09.2012 23:45
как убрать горизонтальные полосы прокрутки при просмотре в андроид?	Алик09	HTML и CSS	11	05.03.2012 10:03
header и footer(всегда прилеплен снизу) фиксированной высоты, резиновый контент в центре с полосой прокрутки	Munk	HTML и CSS	0	17.07.2011 16:10
Как заставить ролик на мышке двигать полосой прокрутки	clanz	Microsoft Office Access	4	28.02.2010 16:41

27.02.2014, 20:34	#2
MaTBeu Eclipse Foundation Старожил Регистрация: 19.09.2007 Сообщений: 2,604	Пример работы есть? Может быть все, что угодно

28.02.2014, 10:20	#3
Lime Форумчанин Регистрация: 10.02.2009 Сообщений: 815	Пример vk.com ) вне зависимости от наличия ползунка прокрутки, координаты центральной колонки не меняются.

05.03.2014, 04:52	#4
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Выглядит примерно так: tester69.esy.es

05.03.2014, 13:02	#5
MaTBeu Eclipse Foundation Старожил Регистрация: 19.09.2007 Сообщений: 2,604	Где проблема? Код показывайте

05.03.2014, 22:07	#7
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `body { overflow: scroll; }` либо правое поле в 19px для нескролящихся страниц, но я бы не парился из-за этого: пока браузер будет рисовать страницу и грузить картинки, никто не заметит разницы Alar, верни репу!

05.03.2014, 22:58	#8
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Да, мне на другом сайте сразу посоветовали сделать scroll на всех страницах. Просто думал что есть что-то более технически правильное. Это скорее выглядит уловкой :-)

05.03.2014, 23:06	#9
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Сделайте постоянную видимость scroll и не мучайтесь