O meu body não está a ocupar a pagina toda!

André Granja · Janeiro 19, 2018

O meu body não está a ocupar a pagina toda e eu meti tudo dentro do body não entendo poque isto.

Já tentei de tudo como por exemplo meter em css height: auto; mans nada acontece.

Aqui esta o meu codigo:

<html>
   <head>
       <title>Markus Persson</title>
       <link rel="icon" href="NotchIcon.png" type="image/x-icon" />
       <meta charset=UTF-8 />
       <link href="Style.css" rel="stylesheet" />
   </head>
   <body>
       <div id="wrapper">
           <div id="columnLeft">
           </div>
           <div id="columnRight">
           </div>
           <div id="columnCenter">
               <div id="banner">
                   <ul class="menu">
                       <li class="dropdown "><a href="MarkusPersson.html" class="dropbtn">Markus Persson</a>
                       <div class="dropdown-content">
                           <a href="OndeNasceu.html">Onde Nasceu</a>
                           <a href="OndeVive.html">Onde Vive</a>
                       </div>
                       </li>
                       <li><a href="Mojang.html">Mojang</a></li>
                       <li><a href="Minecraft.html">Minecraft</a></li>
                       <li style="float:right"><a class="active" href="SobreMim.html">Sobre Mim</a></li>
                   </ul>
               </div>
               <br>
               <font face="Modern" size=4>
                   <hr width=100% color=black size=3 align=center></hr>
                   <center><h1>Markus Persson</h1></center>
                   <hr width=100% color=black size=3 align=center></hr>
               </font>
               <br>
               <center><img title="Markus Persson" src="MarkusPersson.png" width=500 height=380></center>
               <center>Img.1 - Markus Persson</center>
               <div id="textos">
                   <p align="justify">    <b>Markus Persson</b> mais conhecido como <b>Notch</b> nasceu no dia 1 de junho de 1979 em Estocolmo (Suécia).
                       Markus Persson aos 30 anos de idade fundou a Mojang AB onde desenvolveu o jogo mais conhecido da empresa o Minecraft. Markus Persson em novembro
                       de 2014 deixou a Mojang AB pois vendeu a há Microsoft por 2.5$ Bilhões de dólares.
                       Como Markus Persson tinha 70% da Mojang, ao vender a sua empresa tornou-se bilionário. Ainda em 2014 comprou uma mansão por 70$ Milhões em Los Angeles
                       nos EUA.</p>
                   <p align="justify">    Markus Persson iniciou a sua carreira de programador em um<i> Commodore 128 <sup>(Img.2)</sup></i> com um computador
                       pessoal quando tinha 7 anos de idade. Trabalhou até 2009 na<i><a class="texto" href=https://king.com/> King.com </a></i>
                       Trabalhou como programador em um software de gerenciamento de fotografias<i> Jalbum</i>, Markus Persson também foi um dos fundadores do MMOWurm Online
                       (um MMORPG desenvolvido pela Code Clube AB).</p>
                   <p align="justify">    Atualmente Markus Persson não tem trabalho mas também não pretende arranjar um.</p>
               </div>
               <br>
               <center><img title="Commodore 128" src="Commodore128.png" width=300 height=300></center>
               <center>Img.2 - Commodore 128</center>
               <br>
               <font face="Modern" size=3>
                   <hr width=30% color=black size=3 align=left></hr>
                   <h3>Trabalhos de Markus Persson</h3>
                   <hr width=30% color=black size=3 align=left></hr>
               </font>
               <div id="textos">
                   <ul type=circle>
                       <li><b>Jogos</b>
                           <ol><p align="justify">Markus Persson criou muitos jogos pequenos, muitos deles para competições e ainda tem muitos jogos inacabados.</p></ol></li>
                       <li><b>Minecraft</b>
                           <ol><p align="justify">O jogo que teve mais sucesso que Markus Persson criou. Acabou por vender o jogo para a Microsoft porque já não conseguia lidar com
                           a pressão de ter criado um jogo tão grande
                           (O Terceiro jogo mais jogado do mundo). As pessoas da Mojang ficaram chateadas com ele por te-lo feito.</p></ol></li>
                       <li><b>Wurm Online</b>
                           <ol><p align="justify">Co-criado com Rolf Jansson há muitos anos atrás. Terminou por deixar o projeto quando Rolf se afastou e tornou-se mais difícil
                           trabalharem juntos.</p></ol></li>
                       <li><b>Drowning in Problems</b>
                           <ol><p align="justify">Feito para uma competição de desenvolvimento de jogos de 48 horas com o tema "sob a superfície". Completou o jogo em menos
                           de dez horas.</p></ol></li>
                       <li><b>Shambles</b>
                           <ol><p align="justify">Uma entrada para a competição de fps (First Person Shoter) onde o objetivo é tentar fazer um jogo de tiros em primeira pessoa
                           em uma semana. Fez em Unity.
                           O jogo não é muito mau mas, como é um jogo de ataque de pontuação onde o jogador inevitavelmente será invadido pelo acúmulo de zumbis, isso definitivamente
                           causa fadiga nos jogadores.</p></ol></li>
                   </ul>
               </div>
               <br>
               <fieldset>
                   <legend align="center">Opinião</legend>
                   <center><textarea cols=125 rows=15 maxlength="10000" placeholder="Deixe aqui a sua opinião..."></textarea></center>
                   <br>
                   <center><input class="button button2" type=submit value=Enviar action=""></input></center>
               </fieldset>
               <br>
               <center><button class="button button1"><a href="#top">VOLTAR PARA O TOPO</a></button></center>
               <br>
               <div id="footer">
                   <div id="footerLeft">
                       <br>
                       <a class="footerLinks" href=https://twitter.com/Fn4ticMC>Twitter</a> | <a class="footerLinks" href=https://www.instagram.com/andregranjapt1/?hl=pt>Instagram</a> |
                   </div>
                   <div id="footerCenter">
                       <br>
                       <marquee scrollDelay="30">Copyright © || Página criada por André Granja</marquee>
                   </div>
                   <div id="footerRight">
                       <br>
                       2018 / 2019
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

O meu css:

/* ------------------------------- Layout ------------------------------- */

body {
   height: auto;
   margin: 8px;
   background:url(Fundo.jpg);
}

#wrapper {
width: 100%;
height: auto;
}

#banner {
width: 100%;
height: 46px;
background-color: #000000;
}

#columnLeft {
width: 20%;
height: auto;
float: left;
min-height: 100%;
}

#columnCenter {
   width: 60%;
   height: auto;
   float: right;
   background-color: #87CEFA;
}

#columnRight {
width: 20%;
   height: auto;
   float: right;
   min-height: 100%;
}

#footer {
width: 100%;
height: 56px;
color: white;
background-color: #000000;
}

#footerLeft {
   width: 20%;
   height: 56px;
   color: white;
   float: left;
   text-align: center;
}

#footerCenter {
   width: 60%;
   height: 56px;
   color: white;
   float: left;
}

#footerRight {
   width: 20%;
   height: 56px;
   color: #FE2E64;
   float: right;
   text-align: center;
}

#opiniao {
width: 80%;
height: auto;
}

fieldset {
margin-left: 40px;
margin-right: 40px;
padding-top: 20px;
padding-bottom: 20px;
}

/* ------------------------------- Menu ------------------------------- */

ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #FE2E64;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
min-width: 135px;
}

.dropdown-content a {
color: white;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #000000}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #FE2E64;
}

/* ------------------------------- Formatações ------------------------------- */

a.footerLinks:link {
color: purple;
text-decoration:none;
}

a.texto:link {
color: black;
}

a:link {
color: white;
text-decoration:none;
}

a.footerLinks:visited {
color: purple;
   text-decoration:none;
}

a.texto:visited {
color: black;
}

a:visited {
color: white;
   text-decoration:none;
}

h1 {
   color: #000000;
   font-family: times;
}

h4 {

}

#textos {
   width: 90%;
   height: auto;
   background-color: #87CEFA;
   margin: 0% 5%;

}

#estocolmo {
margin-left: 40px;
margin-right: 40px;
padding-top: 20px;
padding-bottom: 350px;
}

img {
max-width: 100%;
height: auto;

}

.button {
background-color: #87CEFA;
border-radius: 25px;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button1 {
background-color: #f44336;
color: black;
border: 2px solid #f44336;
}

.button2 {
background-color: MediumSeaGreen;
color: black;
border: 2px solid MediumSeaGreen;
}

fieldset {
display: block;
margin-left: 5%;
margin-right: 5%;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
border: 15x groove;
}

Omar~ · Janeiro 20, 2018

@André Granja Nos ajude a te ajudar.

Quando for postar códigos (grandes), no topo de editor tem um botão em formato de olho (spoiler) coloque o código dentro disso ajuda a reter o que faz parte de cada coisa, existe também outro botão (code) que pode ser usado para postar códigos com formatação.

Agora ao seu caso, só dei uma olhada por cima e percebi o uso de flutuantes (float). Quando você usa essa propriedade do css automaticamente você desvincula o elemento filho do elemento pai, passando a ter suas características próprias. Exemplo:

<div class="pai">
  <div class="filho-esq"></div>
  <div class="filho-dir"></div>
</div>

Se div.filho-esq e div.filho-dir recebem a propriedade float, apesar de estarem dentro da div.pai não vão respeitar suas delimitações. Existem algumas formas de prever isso, a mais simples e menos prática seria ao final da div.pai você limpar-la assim:

<div class="pai">
  <div class="filho-esq"></div>
  <div class="filho-dir"></div>
  <div style="clear: both"></div>
</div>

Também deve-se ficar atento as passagem da propriedade height, que se não for bem elaboradas podem apresentar seu problema, blocos filhos escapando ao bloco pai.

Também percebi que blocos não estão completamente preenchidos, o que é muito simples, use isso no seu css:

*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
html {overflow-x: hidden}

Entrar

Arquivado

O meu body não está a ocupar a pagina toda!

Recommended Posts

André Granja 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

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

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante