Tamanho tela usuario

Jessi1412 · 15 de outubro de 2014

Boa Tarde.

tenho o seguinte codigo



<div class="corpo">

		<div class="corpo_tabela">

			<table border="1" style="width:100%">

			  <tr>

				<td>Registro</td>

				<td>Descriçao</td>		

				<td>Estado</td>


			  </tr>

			   <tr> 

				<td>1111111</td>

				<td>Tetjskkdkskjdskjsdhkjsdhj</td>		

				<td>

					<div class="circulo_verde">

						 <div class="descricao">Passa o mouse e aparece o que conteudo da div, porem essa div 

						 precisa ter o tamanho da tela do usuario</div>

					</div>

				</td>


			  </tr>


</table>

		</div>

	</div>



@charset "utf-8";


*{font-family:Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:14px; margin:0; padding:0;}


.corpo {

	/*background-color:blue;

	min-width:1024px;

	min-width:1024px;

	border-style: solid;

	border-color: #CFCFCF;*/

	width:100%;

	height:100%;

	text-align: center;

	position: relative;


	}


.circulo_verde, .circulo_amarelo, .circulo_vermelho{

	border-radius: 100%;

    width: 20px;

    height: 20px;

    margin: auto;

	}

.circulo_verde{

	background-color:#32CD32;

}

.circulo_amarelo{

	background-color:#FFD700;

}

.circulo_vermelho{

	background-color:#FF0000;

}


.conteudo{

	background-color:#191970;

}


.descricao{

	background-color:blue;

    display: none;


}

.circulo_verde:hover .descricao{

    display: block;

}

Na segunda linha da coluna chamada estado, tenho uma div em verde, quando passo o mouse aparece outra div, porém preciso que essa div que aparecer fique do tamanho da tela do usuario, como posso fazer isso?

Obs: Precisa funcionar em todos os navegadores.

Mog.Lucas · 15 de outubro de 2014

http://jsfiddle.net/kt06up34/

.descricao{    position: absolute;    left: 0px;    width: 100%;    background-color:blue;    display: none;}

Adicionei as três primeiras propriedades. Entretanto, devo lhe chamar atenção ao fato de que o usuário pode aumentar/diminuir o tamanho do navegador, ou ocorrer algum outro impacto na resolução que possa necessitar intervenção do javascript.. mas veja se o acima é o suficiente..

DiF · 15 de outubro de 2014

Outra solução seria desta maneira: http://jsfiddle.net/Lunvr0c1/

No código, veja que retirei o div de dentro do circulo_verde e usei no css a regra de seletor de elementos irmãos adjacentes.

Mas a do @Mog.Lucas já é mais do que suficiente!

ps: O motivo por eu ter colocado um negrito no "O" antes da palavra "div" se dá por que não falamos " A div".. mas sim " O div", pois este é um elemento.. e não "uma elemento"

Jessi1412 · 16 de outubro de 2014

Bom dia,

@Mog.Lucas e @dif então os dois resolveria o meu problema, porém nenhum funciona no internet explore. E preciso que funcione nesse navegador, se alguem poder me ajudar fico grata.

Mog.Lucas · 16 de outubro de 2014

Por gentileza, não seja mais uma que odeia o internet explorer sem motivos. Para fazer funcionar no IE, é necessário definir o doctype do arquivo. Não se trata bem de um erro..

Adicione o seguinte na primeira linha do arquivo (ou antes do <html>):