Tamanho da DIV (width)

16/11/2016

0

Alguém sabe se tem como criar uma div com um tamanho determinado, mas que possa ser reduzido caso a janela do navegador seja reduzida?
EX:
div {
      max-width: 150px;
}


OBS: minha div não possuí um conteúdo que a expanda até o tamanho de 150px e se eu deixar o tamanho fixo (width: 150px) ela não iria diminuir com a redução no tamanho da janela.
como resolver esse problema?
Repetindo, ela tem que ter 150px, mesmo não tendo conteúdo, com a janela normal e deve ser reduzida caso a janela seja achatada
Michael Batista

Michael Batista

Responder

Post mais votado

17/11/2016

Então, você deve colocar um tamanho padrão nele utilizando a propriedade width. A propriedade max-width tem prioridade sobre a width, então mesmo que você coloque 1000px e o max-width for 400px, a div não vai ser maior que 400px. Mas não da para fazer a mesma coisa com o min-width porque ele tem prioridade sobre o max-width.

Uma outra alternativa é trabalhar com porcentagens, mas tem que levar em conta que o elemento pai tem que ter um tamanho definido.

Sergio Mono

Sergio Mono
Responder

Mais Posts

16/11/2016

Sergio Mono

Olá Michael, você pode fazer assim.

div {
      max-width: 100vw;
      width:150px;
}


Assim ela terá o tamanho de 150px por padrão, mas se a tela tiver a largura menor que 150px ela seguirá pelo tamanho da tela.
Responder

16/11/2016

Michael Batista

acho que me expressei mal, naturalmente nem é possível reduzir a janela do navegador até 150px. eu fiz o teste e o minimo é 275px (no Google Chrome). na minha pagina tem diversas divs é claro, que naturalmente uso max-width para deixar responsivo. agora a única diferença entre essa e as outras divs é que ela não possui quase nenhum conteúdo, por isso n posso usar o max-width
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar