Расположение блоков и полоса прокрутки

Feel · October 18, 2012

Исходный код:

html

<body>
<div id="wrapper">
	<div id="header">
	</div>

	<div id="logo">
	</div>

	<div id="menu">
	</div>

	<div id="content">
	</div>

	<div id="footer">
	</div>
</div>
</body>

css

body {
background-color:#FFFFFF;		
padding:0 auto;
margin:0 auto;
}

#wrapper {
/*Выравнивание всех вложенных блоков по центру*/
}

#header {
width: 1000px;
background: black;
opacity: 0.8;
height: 35px;
top:0;
position:fixed;
}

#footer {
width: 1000px;
background: black;
opacity: 0.8;
height: 35px;
bottom:0;
position:fixed;
}

Вопросы:

1) Создал блок "wrapper" чтобы с помощью него центрировать все дочерние блоки, т.е. все, что присутствуют на страницы. Но что-то не выходит. Прогуглил что лучший способ - воспользоваться "margin:0 auto", но не вышло. Прошу, помогите исправить стили, чтобы добиться нужного результата.

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

P.S. Ширину всех дочерних блоков хотелось бы задавать один раз в родительском, чтобы остальные блоки ее наследовали. Тоже не пойму как.

2)Как сделать размер страницы аналогично google.com. А именно, сделать так, чтобы страница всегда занимала всю высоту окна браузера (не больше и не меньше) при любом разрешении экрана и браузере, убрать бегунок вертикальной полосы прокрутки (чтобы он появлялся только при уменьшении окна браузера).

Заранее благодарю за ответы.

Бывает же. Только с отчаянии создал тему и через минуту уже в голову пришел ответ.

Решил 1 вопрос добавив в стили блока wrapper:

left: 50%;
margin-left: -500px;
position: absolute;
width: 1000px;

Однако, я не уверен насчет максимальной эффективности такого центрирования и его кроссбраузерности. Если есть подводные камни в этом методе, поправьте пожалуйста.

Вопрос №2 остается открытым.

Edited October 18, 2012 by Feel

iKNG · October 18, 2012

В кроссбраузерности можешь не сомневаться.

Вопрос №2 - чтобы небыло полосы прокрутки: overflow: hidden; в wrapper добавь, а для изменения высоты height: 100%; display: block; попробуй

Итог:


body {
background-color:#FFFFFF;               
padding:0 auto;
margin:0 auto;
}

#wrapper {
left: 50%;
margin-left: -500px;
position: absolute;
width: 1000px;
overflow: hidden;
height: 100%; 
display: block;
}

#header {
width: 1000px;
background: black;
opacity: 0.8;
height: 35px;
top:0;
position:fixed;
}

#footer {
width: 1000px;
background: black;
opacity: 0.8;
height: 35px;
bottom:0;
position:fixed;
}

Edited October 18, 2012 by iKNG

Feel · October 18, 2012

Есть еще такой момент, что прокрутка может осуществляться не только при помощи полосы прокрутки, но и при помощи курсора прокрутки при нажатии на колесико мыши или двойным кликом по тачпаду. И overflow:hidden здесь не помогает.

Edited October 18, 2012 by Feel

wwt · October 18, 2012

overflow:hidden скрывает полосы прокрутки. а не отменяет саму прокрутку.

Если вам нужно убрать и это то javascript вам в помощь и глушите события.

Edited October 18, 2012 by wwt

Feel · October 18, 2012

overflow:hidden скрывает полосы прокрутки. а не отменяет саму прокрутку.
Если вам нужно убрать и это то javascript вам в помощь и глушите события.

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

Остался последний неразрешенный момент:

Как сделать чтобы дочерние блоки, наследовали ширину родительского блока "wrapper"? Криво как-то задавать каждому блоку ширину. Лень Интуиция подсказывает что можно сделать проще.

iKNG · October 19, 2012

width: inherit; примени к дочерним блокам.

Edited October 19, 2012 by iKNG

Feel · October 19, 2012

width: inherit; примени к дочерним блокам.

Объем кода это конечно не сократит, но хотя бы будет удобно менять значение параметра, спасибо.

Тема закрыта.

Sign In

Расположение блоков и полоса прокрутки

Question

Feel

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

iKNG

Link to comment

Share on other sites

Feel

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Feel

Link to comment

Share on other sites

iKNG

Link to comment

Share on other sites

Feel

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information