Como deixar todas as DIVS do mesmo tamanho?

Perguntado por: lmoreira . Última atualização: 17 de julho de 2023
4.7 / 5 19 votos

É possível deixarmos todas as colunas com a mesma largura. Basta atribuirmos 1 (um) para cada coluna, e então a largura total do elemento pai será distribuída de forma igual, ficando assim cada coluna com 300px (neste exemplo). Prontinho!

Genericamente a solução é meter o img dentro de um div, e limitar apenas a largura do div que contém a imagem. A imagem deve ter 'width: 100%'. Assim, a imagem ficará proporcional, e com a largura do div.

A forma mais simples de se criar esse efeito é adicionando o estilo padding-bottom com o percentual equivalente da altura dividido pela largura pretendida. Assim, mesmo após redimencionar a janela, o tamanho da div será sempre proporcional a 720:540. Exemplo: JSFiddle. +1 Realmente bacana e simples essa solução.

10 Respostas

  1. Levar em consideração a margem manualmente: width: calc(100% - 100px); ...
  2. Remover o position: fixed; e o width: 100%; e aplicar seu efeito usando um truque com a margem inferior: /*width: 100%;*/ /*position: fixed;*/ margin-bottom: -60px;

A tag <div> deve sempre ser estilizada por um arquivo . css, mas para isso é preciso definirmos um id ou class para ele, ficando conforme a Listagem 2. Esse tipo de div deverá ser estilizado no CSS por meio do carácter “#”.

A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos.

Outra forma mais simples, que recomendo, caso você queira utilizar a altura 100% é utilizar a unidade relativa vh, pois dessa forma faremos sempre a altura se ajustar a altura do dispositivo, facilitando principalmente quando necessitar de sliders com height 100% e também poderá utilizar o vw, para width 100%.

Como fazer o texto se ajustar ao tamanho da div? Para isso você pode usar a unidade vw ou viewport width, que é relativa ao que pode ser visto de acordo com o tamanho (width), ou seja, irá variar de acordo como o tamanho.

O atribuito height define o tamanho vertical ocupado por uma tag na tela do navegador. Esta dimensão incorpora todos os elementos internos do box model, incluíndo o atribuito padding e o atributo border .

A propriedade min-height do CSS é usado para definir a altura mínima de um determinado elemento. Ele impede que o valor usado da propriedade height se torne menor que o valor especificado para min-height. O valor de min-height substitui os dois max-height (en-US) e height .