Tamanho de elemento dinâmico via manipulação de posição CSS

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!

Exemplo ao Vivo

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);  
}

Full Live Example

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