- Ajustando a Altura da Tela com CSS Para garantir que o seu site ocupe 100% da altura da tela do usuário, você pode usar a propriedade height com o valor 100vh no elemento body. Isso garante que o body ocupe toda a altura da janela de visualização.
css Copiar body { height: 100vh; /* Ocupa 100% da altura da janela / margin: 0; / Remove margens padrão */ } 2) Controlando o Tamanho de Elementos com Box Sizing Para evitar que elementos filhos ultrapassem os limites ao adicionar bordas e paddings, utilize box-sizing: border-box;. Isso faz com que a largura e altura de um elemento incluam padding e border.
css Copiar body { box-sizing: border-box; }
*, *::before, ::after { box-sizing: inherit; / Aplica a todos os elementos */ } 3) Criando um Layout sem Scroll Para criar um layout que caiba em uma única tela sem scroll, você pode usar Flexbox para posicionar os elementos lado a lado e centralizá-los:
html Copiar
.layout { display: flex; width: 100%; justify-content: space-around; /* Espaçamento entre blocos */ }
.bloco { background-color: white; width: 45%; /* Ajusta a largura conforme necessário / height: 80%; / Ajusta a altura conforme necessário */ } 4) Flexbox: Alinhando Textos e Imagens Para posicionar um bloco de texto à esquerda e uma imagem à direita:
html Copiar
Texto aqui...
css
Copiar
.container {
display: flex;
justify-content: space-between;
align-items: center; /* Centraliza verticalmente */
padding: 20px; /* Espaçamento interno */
}
.texto {
flex: 1; /* Ocupa espaço disponível */
}
.imagem {
width: 150px; /* Ajuste conforme necessário */
height: auto;
}
5) Flexbox: Centralização Vertical
Para centralizar verticalmente o conteúdo dentro de um container:
html Copiar
html Copiar
.responsivo-container div { flex: 1 1 40%; /* Flexibiliza largura dos itens / min-width: 200px; / Largura mínima para responsividade */ background-color: lightgray; padding: 20px; text-align: center; }
