[Resolvido] Borda (canvas) com 100%

[Donando 1]

Amigos,

imagino que seja algo simples, mas como sou leigo (autodidata) estou enfrentando dificuldades.

 

Quero criar uma borda preta que sempre ocupe todo o contorno da janela.

 

Tentei com o seguinte código:

 

html:

<canvas id="borda" width="100%" height="100%" style="border:10px solid #000000;">

 

css:

html, body { 
height: 100%; 
margin: 0; 
padding: 0; 	
}
#borda {
position:absolute;
top:0px;
right:0px;
width:100%;
height:100%;
z-index:100;

}

 

Porém a borda não está ficando no lugar correto e nem está 100% certinho.

 

Alguem pode me ajudar?

 

Obrigado.

[Kaue Machado 0]

<span class="borda"></span>

 

.borda{
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

 

Obs.: Ser autodidata não significa ser leigo, pelo contrário, grande parte (arrisco dizer que pelo menos 75%) dos desenvolvedores são autodidatas.

 

Boa sorte com seu aprendizado :thumbsup:/>

[Donando 1]

Olá Kaue,

você tem razão. No meu caso eu sou leigo e autodidata. rsrsr

 

Seguinte, tentei o código que você passou mas a borda não está ficando com 100% da janela, ela está aparecendo no local correto porém está saindo da janela na direita e em baixo.

 

Dê uma olhada se coloquei os códigos de forma correta:

 

.borda{
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

 

<span class="borda" canvas id="borda" width="100%" height="100%" style="border:10px solid #000000;">
</canvas>
</span>

 

Obrigado

Abs

[JCMais 75]

Estude sobre Box Model que você vai entender o porque que isso ocorre.

 

Basicamente o padrão é somar os valores para atribuir o tamanho final no qual o elemento será renderizado, no seu caso o tamanho da borda é adicionada as dimensões do elemento, o que faz ele ficar maior do que a página e então aparecer o scroll. Você pode evitar isto usando box-sizing, adicione o seguinte ao seu CSS:

 

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

 

Recomendo a leitura: http://css-tricks.com/box-sizing/

[Donando 1]

Perfeito.

Muito obrigado.

 

p.s. Curti o css-tricks, não conhecia, vou devorar....

 

Abs