Posicionamento fixed empurra conteúdo ao gerar scrol na página

Pra melhorar um pouco, como faço para manter uma distância default de determinada área do site? Like a facebook faz. Se você diminui a tela com scroll o conteúdo central onde ficam as atualizações não extrapolam determinada área.

Force o aparecimento da barra de rolagem quando ela não for necessária declarando nas CSS:

html { height:101%; }

Meu querido Maujor, perfeita solução. Se puder concluir, tenho mais uma questão.

<div id="position_fixed_top"></div>

<div id="position_fixed_left"></div>

<div id="position_absolute"></div>

Essa div, com position absolute, fica toda largada. Quando rola o scroll pra aumentar ou diminuir o tamanho da página na tela. Como faço para manter ela, eu sei que ela vai se deslocar, mas quero mantê-la fixa em um determinado eixo. Isso porque se diminuir muito o conteúdo dela cai pra debaixo da div com id = position_fixed_left.

@paladino_php,

Poste um link para o site, não entendi bem essa sua segunda pergunta.

Bom dia William Bruno, não dá porque o mesmo possui senha para acesso. Mas pegue como base a página do facebook https://www.facebook.com/. Se você rola o scroll, tanto pra cima quanto pra baixo, você percebe que a timeline fica exatamente onde está e se alinha de acordo com o topo. E ambas são fixas, tanto o topo quanto o menu lateral esquerdo. O que se move é apenas o conteúdo central, no caso a timeline. A minha está se movendo para os cantos, entendeu ? Se rolar o scroll ela cai pra baixo do menu ao invés de se manter estática ali no lugarzinho dela :D

Dando um up.

sim, eu entendi o que vc quer, mas não sei no que vc está errando, sem ver implementado o seu projeto.

vc precisa isolar um trecho de código e postar para analisarmos, um protótipo real.

Se não, nunca sairemos do lugar.

Bom dia William, o código é esse mesmo acrescentando o topo

 width: 100%;
 height: 50px;
 background: #eee;
 border-bottom: 2px solid #222;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;

>
Bom dia, tenho a seguinte marcação:

<div id="main_left"></div>
<div id="content_rigth"></div>

<style>
#main_left {
 position: fixed;
 top: 0;
 left: 0;
 margin-right: 10px;
 z-index: 9999999999;
 width: 210px;
 background: #222;
 height: 100%;
 box-shadow: 1px 0 0 #000;
}
#content_right {
 position: absolute;
 padding: 0 0 80px 0;
 margin-left: 110px;
 top: 50px;
 width: 100%;
}
</style>
 

"Bunito", "daora". O problema é quando a página gera um scroll vertical. Dai então o conteúdo é empurrado 10px para à esquerda, o que eu imagino que seja a largura da barra. O que eu posso fazer para resolver essa questão ?

Ok, mas agora olha essas 2 propriedades:

#content_right {

 margin-left: 110px;

 width: 100%;

Exemplo:

<div id="content_top"></div>
<div id="main_left"></div>

<div id="right">
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quo, et, error veritatis quasi inventore ipsam officia mollitia eveniet quos corrupti consectetur cupiditate molestias impedit molestiae aut hic modi pariatur?</div>
 <div>Assumenda, odit optio repudiandae ipsum veniam expedita itaque. Magnam, voluptatibus, tempora, illo rerum repellendus deserunt aspernatur neque necessitatibus cumque corporis beatae quos ab fugiat esse deleniti commodi magni repudiandae blanditiis?</div>
 <div>Consectetur, eum, doloremque, quas, hic repellendus sequi pariatur temporibus aliquid sint dolorem deleniti architecto veritatis itaque recusandae laudantium ullam voluptas iure sunt rerum tenetur nemo maxime ea omnis distinctio harum?</div>
 <div>Amet, odit, obcaecati, possimus, iusto expedita cupiditate provident corporis nobis aliquid ea consectetur placeat. Ratione, excepturi, fugit, non, obcaecati blanditiis vel commodi vitae rem quaerat neque illo eum repudiandae consectetur.</div>
 <div>Necessitatibus, laboriosam, neque nulla dolorum eius autem aut illum soluta unde sapiente eaque saepe aliquam earum in impedit voluptas voluptates at qui aspernatur mollitia animi quia rerum cum vitae corrupti.</div>
 <div>Illum, deleniti, maxime, repudiandae, dolorem est qui non saepe vel dolore at fugiat cupiditate nihil quia doloremque minus expedita inventore. Quibusdam, asperiores enim assumenda nihil quo deleniti neque. Officiis, illo!</div>
 <div>Eos, commodi, asperiores labore non voluptate omnis totam voluptates vel amet suscipit eius sequi veniam incidunt deserunt aut ut consectetur quia sit repudiandae saepe excepturi cum nisi repellendus odio corporis!</div>
 <div>Esse, dolore, temporibus, officia quisquam quasi nulla aut qui soluta quo vero quod quia quaerat enim totam fugit nemo unde voluptas neque odit at sed saepe reiciendis rerum quidem libero!</div>
 <div>Totam, amet, consectetur magni earum natus perspiciatis rerum sunt repudiandae dicta fugiat excepturi cumque aliquid quas eligendi illo error praesentium! Ex sit saepe aliquid facilis animi incidunt recusandae dolorem id!</div>
 <div>Pariatur aspernatur numquam doloremque inventore et ipsa cupiditate iste ad. Ipsum dolorum deleniti aliquam eos consequuntur. Tempore, quae, assumenda amet eligendi a adipisci nemo dolorem incidunt nihil repellat doloribus culpa.</div>
</div><!-- #right -->

<style>

#main_left {
 position: fixed;
 top: 0;
 left: 0;
 margin-right: 10px;
 z-index: 9999999999;
 width: 210px;
 background: #222;
 height: 100%;
 box-shadow: 1px 0 0 #000;
}
#right {
 margin: 50px 0 0 210px;
 height: 2000px;
}
#content_top {
 width: 100%;
 height: 50px;
 background: #eee;
 border-bottom: 2px solid #222;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
}
</style>

É o problema está na minha aplicação então. Deixe-me ver

Vlw William solucionou o problema.