1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Rodapé fixo em baixo

Olá, eu estou fazendo um site simples e queria fazer com que meu footer ficasse fixo no final da página como o header fica em cima, eu consegui fazer ele ficar em baixo, más ele acompanha o usuário enquanto ele rola a página, e não é isso que eu quero, meus códigos;

Html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <META CHARSET="UTF-8"/>
    <title>TKF O Melhor do Interterimento Para Você</title>
    <link rel="shortcut icon" href="_files\Pictures\teste.ico"/>
    <link rel="stylesheet" href="_css\paginainicial.css" type="text/css"/>
</head>
<body>
   <div id = "conteudo">
   <nav id = "Navegacao">
    <header id = "cabecalho" right = 600px height = 500px>
      <img  id = "logomarca" src = "_files/Pictures/logo.png" height=200px/>
       <h1>Bem Vindo ao Nosso Site, Aqui Você Irá Encontrar Melhor do enterterimento para você</h1>
       <img id = "menu" src = "_files/Pictures/menu.png" height=72px right=502px/>
       <img id = "botaoentrar" src = "_files/Pictures/botão entrar.png"/>
       <img id = "botaoregistrar" src = "_files/Pictures/botão registrar.png"/>
     </header>
    </nav>
       <section id = "Bloco1">
        <div id = "noticias">
          <iframe name = "nomejaneladestaque" id = "janeladestaque" frameborder="0" scrolling="no" src = "destaque.html">
          </iframe>
        </div>
       </section>
      <aside id = "Bloco2">
       <div id "outrasnoticias">
         <h2>Outras notícias</h2>
       </div>
      </aside>
      <footer id = "rodape">
       <h1>rodape</h1>
      </footer>
      </div>    
    </body>
</html>

Css:

@charset = "UTF-8"
    #conteudo{
    min-height: 100%;
    }
#rodape {
            background-color: #00BFFF;
            text-align: center;
            font-size:8pt;
            font-family: Verdana;
            font-weight:bold;
            width:100%;
            position:fixed;
            bottom:0px;
            left:0px;
}    

    aside#Bloco2{
    margin:30px 30px 30px 30px;
     background-color:rgba(0,0,255,.5);
     height:1000px;
     width:300px;
     border: 8px solid rgb(0,0,0);
     display:block;
     float:right;
    }
    iframe{
     position:absolute;
     top: 550px;
     left: 400px;
     margin-top: -150px;
     margin-left: -200px;
    }
    body{
    background-color:rgb(255,255,255);
    margin-left: 10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;    
    border:none;
    }

    header#cabecalho{
    background-color:rgb(255,255,0);
    border: 8px solid rgb(0,0,0);
    padding:10px;
    margin-left: -10px;
    margin-right:-10px;
    margin-top:-10px;
    margin-bottom:-10px;
    }    
     h1{
     font-family: Comic Sans MS, sans-serif;
     font-size:20pt;
     color:rgb(0,0,0);
     }
     h2{
     text-align:center;
     font-family: Comic Sans MS, sans-serif;
     font-size:20pt;
     color:rgb(0,0,0);
     }
    header#cabecalho img#botaoentrar{
      position: absolute;
      top: 180px;
      left: 1250px;
    }
    header#cabecalho img#botaoregistrar{
    position: absolute;
    top:180px;
    left:1150px;
    }
    a{
     text-decoration:none; 

    }
    a:hover{
    text-decoration:underline;
    color:rgb(0,0,0);
    }
iframe#janeladestaque{
 height:500px;
 width:700px;
}
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags html5 html interface web css css3 headers ou faça a sua própria pergunta.