Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17673
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Altura automática, topo e rodapé fixo no layout

16-08-2014 15:16

Nesse post passo um script onde é um layout para um site. O topo e o rodapé são fixos, e a parte central onde entra o conteúdo tem altura automática.

Dependendo da altura do conteúdo, é criado as barras de rolagem de forma automática.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  <title></title>  <style type="text/css">  body { margin:0; background:white; height:100% }  #topo { margin:0; margin-bottom:1em; font-size:100%; background:#eee; height:25px; line-height:25px }  #conteudo { position:absolute; top:25px; bottom:26px; overflow:auto; width:100% }  #margem{padding:10px;}  #rodape { background-color:#eee; position:absolute; bottom:0; margin:0; width:100%; height:25px; line-height:25px }  </style>  </head>  <body>  <div id="topo">TOPO</div>  <div id="conteudo">  <div id="margem">  <p>Following is a bunch of text just to make this object have some overflow.</p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi a wisi. Mauris vulputate rutrum arcu. Sed varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dui. Aenean et turpis. Duis a sapien hendrerit turpis tempor feugiat. Nulla facilisi. Praesent in mauris et ipsum aliquam commodo. Aenean ac nunc. In sit amet elit. Morbi diam. Quisque sodales eleifend urna. Aliquam suscipit velit in nunc. </p>  <p>Vestibulum id magna. Nulla ante pede, sodales non, scelerisque vel, condimentum at, leo. Vestibulum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ullamcorper, wisi vitae aliquet aliquam, dolor arcu cursus magna, non tincidunt nibh nibh vel sapien. Nulla feugiat elit eget urna. Nullam a metus. Donec tempus sapien eu orci. Sed pulvinar, nunc in luctus convallis, lacus ante gravida felis, ac sollicitudin turpis nulla viverra justo. Fusce nunc dui, porta lacinia, tristique et, suscipit vestibulum, lectus. Nunc fringilla sapien. Proin sed leo at velit tincidunt sagittis. Nam mollis tincidunt mauris. Aliquam ipsum nulla, rutrum id, pulvinar sit amet, pellentesque at, neque. </p>  <p>Curabitur ante. Praesent sit amet nibh facilisis est commodo pulvinar. Duis auctor. Ut commodo volutpat massa. Aenean nec erat eget erat adipiscing imperdiet. Curabitur ipsum. Quisque sem lacus, fermentum ut, suscipit non, pulvinar pretium, wisi. Integer libero mauris, ultricies vel, mattis at, luctus id, ipsum. Vestibulum porttitor, mi sit amet vehicula bibendum, wisi sapien egestas purus, sit amet feugiat dolor diam non diam. Sed quis nisl in nisl nonummy hendrerit. Sed ipsum lorem, commodo congue, interdum sed, pretium at, nulla. Nulla facilisi. Curabitur ipsum. Cras aliquam libero vel tellus. </p>  <p>Following is a bunch of text just to make this object have some overflow.</p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi a wisi. Mauris vulputate rutrum arcu. Sed varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dui. Aenean et turpis. Duis a sapien hendrerit turpis tempor feugiat. Nulla facilisi. Praesent in mauris et ipsum aliquam commodo. Aenean ac nunc. In sit amet elit. Morbi diam. Quisque sodales eleifend urna. Aliquam suscipit velit in nunc. </p>  <p>Vestibulum id magna. Nulla ante pede, sodales non, scelerisque vel, condimentum at, leo. Vestibulum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ullamcorper, wisi vitae aliquet aliquam, dolor arcu cursus magna, non tincidunt nibh nibh vel sapien. Nulla feugiat elit eget urna. Nullam a metus. Donec tempus sapien eu orci. Sed pulvinar, nunc in luctus convallis, lacus ante gravida felis, ac sollicitudin turpis nulla viverra justo. Fusce nunc dui, porta lacinia, tristique et, suscipit vestibulum, lectus. Nunc fringilla sapien. Proin sed leo at velit tincidunt sagittis. Nam mollis tincidunt mauris. Aliquam ipsum nulla, rutrum id, pulvinar sit amet, pellentesque at, neque. </p>  <p>Curabitur ante. Praesent sit amet nibh facilisis est commodo pulvinar. Duis auctor. Ut commodo volutpat massa. Aenean nec erat eget erat adipiscing imperdiet. Curabitur ipsum. Quisque sem lacus, fermentum ut, suscipit non, pulvinar pretium, wisi. Integer libero mauris, ultricies vel, mattis at, luctus id, ipsum. Vestibulum porttitor, mi sit amet vehicula bibendum, wisi sapien egestas purus, sit amet feugiat dolor diam non diam. Sed quis nisl in nisl nonummy hendrerit. Sed ipsum lorem, commodo congue, interdum sed, pretium at, nulla. Nulla facilisi. Curabitur ipsum. Cras aliquam libero vel tellus. </p>  <p>Following is a bunch of text just to make this object have some overflow.</p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi a wisi. Mauris vulputate rutrum arcu. Sed varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dui. Aenean et turpis. Duis a sapien hendrerit turpis tempor feugiat. Nulla facilisi. Praesent in mauris et ipsum aliquam commodo. Aenean ac nunc. In sit amet elit. Morbi diam. Quisque sodales eleifend urna. Aliquam suscipit velit in nunc. </p>  <p>Vestibulum id magna. Nulla ante pede, sodales non, scelerisque vel, condimentum at, leo. Vestibulum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ullamcorper, wisi vitae aliquet aliquam, dolor arcu cursus magna, non tincidunt nibh nibh vel sapien. Nulla feugiat elit eget urna. Nullam a metus. Donec tempus sapien eu orci. Sed pulvinar, nunc in luctus convallis, lacus ante gravida felis, ac sollicitudin turpis nulla viverra justo. Fusce nunc dui, porta lacinia, tristique et, suscipit vestibulum, lectus. Nunc fringilla sapien. Proin sed leo at velit tincidunt sagittis. Nam mollis tincidunt mauris. Aliquam ipsum nulla, rutrum id, pulvinar sit amet, pellentesque at, neque. </p>  <p>Curabitur ante. Praesent sit amet nibh facilisis est commodo pulvinar. Duis auctor. Ut commodo volutpat massa. Aenean nec erat eget erat adipiscing imperdiet. Curabitur ipsum. Quisque sem lacus, fermentum ut, suscipit non, pulvinar pretium, wisi. Integer libero mauris, ultricies vel, mattis at, luctus id, ipsum. Vestibulum porttitor, mi sit amet vehicula bibendum, wisi sapien egestas purus, sit amet feugiat dolor diam non diam. Sed quis nisl in nisl nonummy hendrerit. Sed ipsum lorem, commodo congue, interdum sed, pretium at, nulla. Nulla facilisi. Curabitur ipsum. Cras aliquam libero vel tellus. </p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi a wisi. Mauris vulputate rutrum arcu. Sed varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dui. Aenean et turpis. Duis a sapien hendrerit turpis tempor feugiat. Nulla facilisi. Praesent in mauris et ipsum aliquam commodo. Aenean ac nunc. In sit amet elit. Morbi diam. Quisque sodales eleifend urna. Aliquam suscipit velit in nunc. </p>  <p>Vestibulum id magna. Nulla ante pede, sodales non, scelerisque vel, condimentum at, leo. Vestibulum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ullamcorper, wisi vitae aliquet aliquam, dolor arcu cursus magna, non tincidunt nibh nibh vel sapien. Nulla feugiat elit eget urna. Nullam a metus. Donec tempus sapien eu orci. Sed pulvinar, nunc in luctus convallis, lacus ante gravida felis, ac sollicitudin turpis nulla viverra justo. Fusce nunc dui, porta lacinia, tristique et, suscipit vestibulum, lectus. Nunc fringilla sapien. Proin sed leo at velit tincidunt sagittis. Nam mollis tincidunt mauris. Aliquam ipsum nulla, rutrum id, pulvinar sit amet, pellentesque at, neque. </p>  <p>Curabitur ante. Praesent sit amet nibh facilisis est commodo pulvinar. Duis auctor. Ut commodo volutpat massa. Aenean nec erat eget erat adipiscing imperdiet. Curabitur ipsum. Quisque sem lacus, fermentum ut, suscipit non, pulvinar pretium, wisi. Integer libero mauris, ultricies vel, mattis at, luctus id, ipsum. Vestibulum porttitor, mi sit amet vehicula bibendum, wisi sapien egestas purus, sit amet feugiat dolor diam non diam. Sed quis nisl in nisl nonummy hendrerit. Sed ipsum lorem, commodo congue, interdum sed, pretium at, nulla. Nulla facilisi. Curabitur ipsum. Cras aliquam libero vel tellus. </p>  </div>  </div>  <div id="rodape">RODAPÉ</div>  </body>  </html>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado