Div

3 de março de 2008 3 respostas

matheusPJ 3 de março de 2008

Eai gurizada medonha =p

Seguinte, perguntinha com relação a DIVs:

Eu quero fazer uma DIV que cubra o espaço todo da página, largura e altura em 100%. Depois, quero colocar uma DIV dentro dessa DIV externa, e fazê-la ocupar largura e altura 100% tb, porém com um espaço no top, left, right e bottom, com relação a div externa.

Consegui fazê-lo com esse código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Any title</title>
	</head>
	<body style="">

		<div id="box"
			 style="background-color: black;
			 		position: absolute;
			 		top: 0px;
			 		left: 0px;
			 		width: 100%;
			 		height: 100%;
			 		padding: 20px;
			 		overflow: hidden;">

			<div id="innerDiv"
				 style="background-color: red;
				 		position: relative;
				 		width: 100%;
				 		height: 100%;">
			</div>

		</div>

	</body>
</html>

Porém, ao abrir em qualquer browser, fica um scroll feio aparecendo... Como tirar o maldito scroll? :roll:

3 Respostas

jeveauxPJ 3 de mar. de 2008

Ta dando scroll por causa do padding. Eu consegui fazer a metade do que tu quer assim:

<div id="box"  
              style="background-color: black;  
                     position: absolute;  
                     top: 0px;  
                     left: 0px;  
                     width: 100%;  
                     height: 100%;  
                     overflow: hidden;">  
   
             <div id="innerDiv"  
                  style="background-color: red;  
                         position: relative;
                         top: 20px;
                         left: 20px;
                         width: 100%;  
                         height: 100%;">  
             </div>

hehehe Talvez alguma informação daqui ajude: http://www.elated.com/articles/css-positioning/

eltonk 4 de mar. de 2008

O segundo DIV pega o tamanho (100%) relativo à página e não ao primeiro div…

So, workaround para fungar! hehehe

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html>
        <head>
   			<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		   <title>Any title</title>
        </head>
          <body style="">

            <div id="box"
                style="background-color: black;
                       position: absolute;
                       top: 0px;
                       left: 0px;
                       width: 100%;
                       height: 100%;
                       overflow: hidden;">

               <div id="innerDiv"
                    style="background-color: red;
                           position: relative;
                           width: 90%;
                           height: 90%;
                           top: 5%;
                           left: 5%;">
               </div>

           </div>

       </body>
   </html>

Resolve?

:lol:

matheusPJ 5 de mar. de 2008

hahaha, gurizada das antigas se puxando =p

É Elton, é bem isso aí mesmo o que eu queria (quase)… na verdade o espaço em preto na página não ficou fixo né =(

Mas show, já ajuda tb.

Criado 3 de março de 2008

Ultima resposta 5 de mar. de 2008

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados