position fixed

[Biel. 9]

Olá pessoal. Direto ao ponto. Abaixo temos div_1 e div_2 . Note que div_1 tem position:fixed;  Gostaria que div_2 ficasse sempre abaixo da div_1, independentemente de quanto texto tenha a div_1

<style>
*{ margin:0; padding:0;}
body{text-align:center;}

.div_1{
	width:100%;
	background:#7F9F55;
	position:fixed; z-index:0;
	}
	
.div_2{
	background-color:#D6D6D6;
	max-width:800px;
	margin: auto;
  position: relative; z-index:1;
	}
	
</style>

...

<div class="div_1">
div_1 <br />
div_1 <br />
div_1 <br />
div_1 <br />
div_1 <br />
</div>

<div class="div_2">
div_2 <br />
</div>

 

[Jack Oliveira 1]

3 horas atrás, Biel. disse:

Olá pessoal. Direto ao ponto. Abaixo temos div_1 e div_2 . Quero manter a div_1 sempre fixa  e div_2 não.  Gostaria que div_2 ficasse sempre abaixo da div_1, independentemente de quanto texto tenha a div_1

<style>
*{ margin:0; padding:0;}
body{text-align:center;}

.div_1{
	width:100%;
	background:#7F9F55;
	position:fixed;
	}
	
.div_2{
	background-color:#D6D6D6;
	max-width:800px;
	margin: auto;
	}
	
</style>

...

<div class="div_1">
div_1 <br />
div_1 <br />
div_1 <br />
div_1 <br />
div_1 <br />
</div>

<div class="div_2">
div_2 <br />
</div>

 

<style>
*{ margin:0; padding:0;}
html, body {
    height: 100%;
    width: 100%;
	text-align:center;
	}

.div_1_fixed {
    height: 80%;
    width: 100%;
    position: fixed;
    background-color: #7F9F55;
}
	
.div_1_wrapper {
    height: 80%;
}
	
.div_2{
	background-color:#D6D6D6;
	max-width:800px;
	margin: auto;
	}
	
</style>


<div class="div_1_wrapper">
    <div  class="div_1_fixed">
        <p>
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.		
		</p>
    </div>
</div>

<div class="div_2">
    <p>
De onde ele vem?
Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem. Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32.<br>
De onde ele vem?
Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem. Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32.	
	</p>
</div>

 

[wanderval 19]

Mas o que não ficou muito claro, porque você precisa do position:fixed; afinal com a propria div você ja tem esse comportamento, e dessa forma você torna os elementos anexados em diferentes referencias, viewport e elemento parent.

 

Seguindo o seu css a unica forma seria emum cenario onde a primeira div não tivesse seu height alterado assim daria pra colocar a diferença em uma margin top na segunda div.

 

EX: essas divs por si so já executam esse comportamento, pq são por definição display: block então sempre ocuparam 100% dentro do container

<div>div_1</div>

<div>div_2</div>

[Biel. 9]

obrigado a todos pela contribuição. Tarefa resolvida !