CSS Fixo Solução Posicionamento a um dos Problemas do quadro

tigo, vou explicar como você pode usar elementos DIV para os layouts que oferecem quadros HTML. Isso é bom ea tecnologia em que o artigo trabalha com todos os navegadores: novos e antigos. A tecnologia aqui só funciona com novos navegadores (browsers produzidos nos últimos três anos). CSS2 foi recomendado pelo W3C em 1998. A regra de posicionamento fixo era parte da especificação. É de recente que browsers são implementá-lo. Não há nenhuma recomendação CSS3 ainda; mesmo quando ele será recomendado, isso vai levar tempo antes de navegadores irá implementar a especificação CSS3 rules.

In este artigo, eu uso o Sidebar, Cabeçalho e Layout de Conteúdo, para ilustração. Neste layout, você tem o painel de cabeçalho que leva o título da página da web, o logotipo e pode ter um banner. Você tem o painel de barra lateral à esquerda, abaixo do cabeçalho, o que leva os links para a navegação do site. Você tem o painel principal abaixo do painel de cabeçalho e à direita da barra lateral. Isso leva o principal conteúdo da página web. No passado, esse layout foi facilmente conseguido usando quadros HTML.

No entanto, devido aos problemas colocados pela quadros aos motores de busca, hoje você pode ter este layout com elementos DIV facilmente sem o uso de quadros, graças à implementação do recurso de posicionamento fixo por novos navegadores. No artigo, Layout com DIVs em vez de Quadros para HTML, você não ter sucesso em utilizar os elementos DIV (sem usar o recurso de posicionamento fixo) facilmente. No entanto, a vantagem de os projetos que o artigo é que os projetos trabalhar com velhos e novos navegadores.

Usando DIVs com posicionamento fixo, funciona apenas para novos navegadores; que é o que é explicado neste artigo. Eu testei o projeto aqui com o Firefox 2, Netscape 8, Opera 9 e Safari 3Try o código primeiro para apreciar o que está acontecendo antes de olharmos para a explicação abaixo: body {overflow: hidden} #header {position: fixed; width: 100%; altura: 15%; top: 0; left: 0; border: 1px solid azul; z-index: 2} #sidebar {position: fixed; width: 20%; height: 85%; top: 15%; left: 0; border: 1px solid azul; z-index: 2} #main {position: fixed; width: 80%; height: 85%; top: 15%; left: 20%; border: 1px solid azul; overflow: scroll; z-index: 2} Hearder Sidebar para links conteúdo principal vai aqui hereherehereIn o projeto, eu usei fronteiras para demarcar as DIVs, mas a sua presença não é obrigatória.

As barras de rolagem do corpo ElementWith este layout, normalmente, ape