Um pequeno truque que dá volume ao elemento sem usar largura e altura ou JS.
Esta é uma dica muito fácil, mas muitas pessoas não sabem disso.
Digamos que você queira fazer uma caixa modal que cubra toda a tela, exceto 100px de cada lado. Como você resolveria esse problema?
HTML
<div class="popup">some content</div>
Em primeiro lugar, precisamos adicionar uma posição de propriedade : fixed To our div.
Depois disso, queremos posicionar a caixa modal 100px de cada lado da janela de visualização, por que não dar a ela todos os 4 parâmetros de propriedade de posição (superior, direita, inferior, esquerda) ?!
A solução está na questão, você pode dar todos os 4 parâmetros da posição fixa / absoluta, superior: 100px, direita: 100px, inferior: 100px; e à esquerda: 100px ;.
fazendo isso, você está tornando o tamanho do elemento dinâmico de 100 px de cada lado.
CSS
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
/*some styles*/
background-color:#ccc;
border-radius:10px;
border:solid 3px #000;
padding:20px;
}
O div resultante é uma caixa modal de tamanho automático sem uma linha de JS!
Agora, digamos que você queira adicionar uma máscara embaixo da caixa modal, exatamente a mesma ideia!
Aqui está a solução:
HTML
<div class="mask"></div>
CSS
.mask{
position:fixed;
z-index:2;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0.8);
}
Nota:
1. Navegador cruzado (Internet Explorer 8 e superior).
Aproveitar!
Se gostou desta dica, terei todo o gosto em receber o seu LIKE. Você está convidado a me seguir e endossar minhas habilidades.
Elad Shechter