Páginas da Web com um layout fluido ou de largura líquida Use toda a largura do navegador. Isso ocorre porque uma ou mais colunas devem ser redimensionadas automaticamente para ajustar o tamanho da janela do navegador. Portanto, o layout do fluido é mais amigável porque se adapta ao tamanho da tela do espectador. Mais especificamente, para fazer um layout de largura de fluido, a largura do elemento deve ser especificada em “percentagem”.

Este blog o guiará sobre a criação de um layout de largura fixa com CSS.

Como criar um layout de largura de fluido usando CSS?

Em HTML, primeiro, adicione um elemento div com um nome de classe “largura de fluido”. Então, adicione

e

elementos para adicionar algum conteúdo.

Html

Bem -vindo ao Linuxhint

Linuxhint é o melhor site de tutorial online. Se você quiser aprender a programação do Bash, você está no lugar certo.

Adicionar o código acima ao arquivo HTML mostrará a seguinte saída:

A estrutura da página foi concluída. Agora, na próxima seção, os elementos HTML serão estilizados usando várias propriedades CSS.

Estilo todos os elementos

*
margem: 0px;
preenchimento: 0px;

Todos os elementos HTML especificados no arquivo terão uma margem 0px e um preenchimento de 0px.

Div

.largura de fluido
Background-Color: RGB (238, 238, 238);
largura: 90%;
margem: automático;
Altura: 100VH;

A seguir, é apresentada a descrição das propriedades aplicadas à largura de fluido da div:

• ““.largura de fluido”É utilizado para acessar a largura de fluido de classe. Aqui o " . ”O sinal é conhecido como seletor de classe.
• ““cor de fundo”Propriedade determina a cor de fundo do elemento.
• ““largura”Propriedade especifica a largura do elemento.
• ““margem”A propriedade adiciona espaço ao redor dos elementos.
• ““altura”Propriedade define a altura do elemento.

Ao fornecer o código acima mencionado, a saída aparecerá a seguinte:

Pode-se observar que o tamanho da divisão de largura do fluido é ajustado de acordo com o tamanho da tela. Isso significa que os elementos especificados em porcentagens definirão sua largura de acordo com a resolução da tela.

É assim que podemos criar um layout de largura de fluido no CSS.

Conclusão

Os desenvolvedores devem ter muito cuidado ao projetar qualquer aplicativo. Eles devem ter em mente como eles querem que sua aplicação apareça em diferentes dispositivos. Uma dessas coisas é definir o layout da página da web. Além disso, para tornar um layout fácil de usar e responsivo, o “percentagem”A unidade deve ser usada. Este blog explicou com sucesso como criar um layout de largura de fluido no CSS com um exemplo.