div fixa no final de outra div

kaayasinho · Janeiro 30, 2015

Boa tarde,,

gostaria de saber como eu faço para fixar uma div no rodape de outra div.. nao no rodape da pagina.. ou seja

tenho

div1,, e quero que a div 2 ,, fique dentro da div1 so que fixa no final

eu ja tentei colocar position absolute e bottom 0 mas nao funcionou

fiz um codigo breve para tentar solucionar

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
	*{
		margin:0;	
		}
	html,body{
		height:100%;
		min-height:100%;
		background:#fff;
		}
	header{
		width:100%;
		height:50px;
		background:#F00;
		color:#fff;
		position:fixed;
		opacity:0.7
		}
		#section1{
			top:50px;
			min-height:100%;
			width:100%;
			background:#999;
			color:#fff;
			}
		article{
			position:relative;
			margin-top:100px;
			display:inline-block;
			}	
		#section2{
			min-height:100%;
			width:100%;
			background:#FF0;
			color:#fff;
			}
		#article2{
			width:800px;
			height:220px;
			background:#0FF;
			}		
</style>

</head>

<body>
   <header>
   vaijao
   </header>
   
   <section id="section1">
		<article id="article1">
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>


        </article>
   </section>
   
    <section id="section2">
        <article id="article2">
        
        </article>
   </section> 
</body>
</html>

COMO EU FARIA PARA O #article2 FICAR GRUDADO NO FINAL DA SECTION 2,

e caso haja section 3 ele ficar apenas presa no final da section 2 e nao vazar para a 3

Obrigado!

rogerio de paulo · Fevereiro 1, 2015

Fiz uma teste aqui que deve te ajudar pra você ter uma ideia.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>


    <body>


        <style>
            .div1{background: #999; width: 600px; height:600px; position: absolute; margin-top: 150px; }
            .div2{background: #069; width: 300px; height:300px; position: absolute; bottom: 0;}
        </style>


        <div class="div1">
            <h1>Div 01</h1>


            <div class="div2">
                <h1>Div 02</h1>


            </div>
        </div>


    </body>


</html>

Entrar

Arquivado

div fixa no final de outra div

Recommended Posts

kaayasinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rogerio de paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante