Jump to content
Biel.

position fixed

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Direto ao ponto. Estou tentando enviar os dados sem refresh na página.  Obrigado!
       
      pagina1.php <?php @$nome = $_POST['nome']; print $nome.'<br><br><br>'; ?> <script> function enviarSemRefrash() { } </script> <form id="formulario" action="" method="post"> Nome: <br /> <input name="nome" type="text" id="nome" size="35" /> <br /><br /> <input type="submit" name="acao" onClick="enviarSemRefrash()" value="Enviar" /> </form>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Ex1 retorna normalmente os elementos do array. Como fazer o EX2 também retornar os elementos do array. Obrigado!
       
      Ex1 <?php $dados = array('teste1', 'teste2', 'teste3', 'teste4'); for($a=0; $a<count($dados); $a++){ print $dados[$a].'<br>'; } ?> Ex2 <?php $dados = array(`teste1`, `teste2`, `teste3`, `teste4`); for($a=0; $a<count($dados); $a++){ print $dados[$a]; } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. EX1 imprime dados repetidos. EX2 não imprime dados repetidos. Que função uso no  EX1 para imprimir somente dados não repetidos? Obrigado !
       
      EX1
      <?php $a=1; $b=2; $c=1; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?> EX2
      <?php $a=1; $b=2; $c=3; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?>  
    • By Biel.
      Olá pessoal. direto ao ponto. Suponha que o código abaixo é um site.
      a navegação interna entre os links funciona normalmente sem refresh na pagina, mas na ul não passa o link que foi pressionado. Como fazer passar na url o link que foi pressionado ?
       
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$("#tete").click(function( e ){ $("#menu a").click(function( e ){ e.preventDefault(); var href = $( this ).attr('href'); $("#content").load( href +" #content"); }); }); </script> ...
      index.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina index</h1> </div> <hr> fotos.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina fotos</h1> </div> <hr> contato.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina contato</h1> </div> <hr>  
    • By Biel.
      Olá pessoal. direto ao ponto. O código abaixo está ok, clico no botão e o javascript  mostra o conteúdo da div. Gostaria que mesmo atualizando a página/f5 o conteúdo da div continuasse visível. Como resolver este problema? Obrigado !
      <div id="id_tete" style="background:#EBEBEB; font-size:30px; display:none; "> manter conteudo da div visivel mesmo atualizando a página/f5 </div> <button name="ffsd" onClick="func_mostrar()">click</button> <script> function func_mostrar(){ var x = document.getElementById("id_tete"); x.style.display = "block"; } </script>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.