CSS: Deixar um div fixo e o outro rolar com a barra

Para este post vamos aproveitar os códigos descritos aqui.

Agora vamos criar um outro div, supondo que este conterá todo o conteúdo do site e como vamos ter muito conteúdo, precisaremos utilizar a barra de rolagem.

Quando utilizamos a barra de rolagem, o menu na vertical não acompanha o conteúdo. Então com uma simples modificação isto se tornará possível.

Código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style media="screen" type="text/css">
#menu-vertical{
	position:fixed;
	z-index:999; 
	left:0; 
	top:0;
	overflow:hidden;
}
#principal{
	margin:0 auto;
	border:#000000 1px solid;
	width:790px;
	height:1200px
}
</style>
 
<div id="menu-vertical">
   <table cellpadding="0" cellspacing="0">
     <tr><td><a href="index.html">Página Inicial</a></td></tr>
     <tr><td><a href="quem-somos.html">Quem Somos</a></td></tr>
     <tr><td><a href="fotos.html">Fotos</a></td></tr>
     <tr><td><a href="contato.html">Fale Conosco</a></td></tr>
   </table>
</div>
 
<div id="principal"></div>

Explicando:

- A grande jogada está na linha 3, o valor de position mudou de absolute para fixed.
- Na linha 13 nós forçamos um valor alto para height, para ativar a barra de rolagem.

Exemplos de sites:

- Utilizando imagem
hhttp://cursos.brunoavila.com.br/

Related posts:

1. CSS: Criando um menu na vertical
2. CSS: Problemas com height:auto
3. Criando um site: Adicionando link ao menu (parte 4)
4. Criando um site: Dimensões (parte 2)
5. CSS: Problemas de alinhamento (bug)