Tamanho da DIV (width)
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:
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
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
Curtidas 0
Melhor post
Sergio Mono
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.
Uma outra alternativa é trabalhar com porcentagens, mas tem que levar em conta que o elemento pai tem que ter um tamanho definido.
GOSTEI 1
Mais Respostas
Sergio Mono
16/11/2016
Olá Michael, você pode fazer assim.
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.
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.
GOSTEI 0
Michael Batista
16/11/2016
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
GOSTEI 0