Entrar Ainda não tem acesso?
5
respostas

[Dúvida] Página apresenta barra de rolagem

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Ajustando o espaçamento e atividade Recurso Gap

por Jefferson Matheus Dantas de Araujo
| 36.6k xp | 3 posts

Olá, fiquei com o mesmo problema que o colega Lohan. Mesmo indicando que a página conteria "height: 100vh;" a página apresenta barra de rolagem. Vi que responderam que poderia ser porque havia faltado o "box-sizing: border-box;" na propriedade * mas ainda assim persistiu o problema. Segue o meu código CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    color: #f6f6f6;
    height: 100vh;
    box-sizing: border-box;

}

.texto_destaque {
    color: #22d5fd;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.apresentacao_conteudo {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    box-sizing: border-box;
}

.apresentacao_conteudo_titulo {
    font-size: 2.25em;
    font-family: 'Krona One', sans-serif;
}

.apresentacao_conteudo_paragrafo {
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao_links {
    display: flex;
    justify-content: space-between;
}

.apresentacao_links_botoes {
    width: 48%;
    padding: 1.34em 0;
    border-radius: 1em;
    background-color: #22d5fd;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    box-sizing: border-box;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao_imagem {
    height: 500px;
    width: 430px;

}

obs. A classe "apresentacao_imagem", foi porque utilizei uma imagem diferente da usada no curso. obs2. Utilizei as medidas 'em', entendendo que o valor padrão é 16px (não sei ao certo se é isso mesmo).

Agradeço, desde já!

5 respostas
por Raphael Silva Lopes Dias
| 95.6k xp | 9 posts
Estudante

Existem algumas razões pelas quais uma página pode apresentar uma barra de rolagem mesmo quando a propriedade "height" está definida como "100vh". Algumas das razões mais comuns são:

Margens ou preenchimento excessivo - Se um elemento na página tem margens ou preenchimentos excessivos, isso pode fazer com que o elemento seja maior do que o tamanho da janela do navegador, o que pode levar à exibição de barras de rolagem. Certifique-se de que os elementos na página não tenham margens ou preenchimentos excessivos e que estejam dentro das dimensões da janela do navegador.

Bordas ou caixas de sombra - Se um elemento na página tem uma borda ou caixa de sombra, isso pode fazer com que o elemento seja maior do que o tamanho da janela do navegador, o que pode levar à exibição de barras de rolagem. Certifique-se de que as bordas ou caixas de sombra não estejam causando o problema e que o tamanho do elemento se ajuste à janela do navegador.

Elementos filhos - Se um elemento pai na página tem uma altura de "100vh" e um elemento filho tem uma altura maior do que a altura do elemento pai, isso pode fazer com que o elemento pai seja maior do que o tamanho da janela do navegador, o que pode levar à exibição de barras de rolagem. Certifique-se de que os elementos filhos não estejam causando o problema e que o tamanho do elemento pai se ajuste à janela do navegador.

Barra de rolagem do navegador - Alguns navegadores exibem barras de rolagem mesmo quando o conteúdo da página se encaixa perfeitamente na janela do navegador. Isso pode fazer com que a página pareça ter uma barra de rolagem mesmo quando não precisa. Infelizmente, essa é uma limitação do navegador e não há muito que possa ser feito para corrigir isso.

Outras propriedades CSS - Existem outras propriedades CSS que podem afetar a altura de um elemento e fazer com que ele seja maior do que o tamanho da janela do navegador, o que pode levar à exibição de barras de rolagem. Certifique-se de que todas as propriedades CSS estejam configuradas corretamente e que não estejam causando o problema.

Espero que isso ajude a identificar o problema e encontrar uma solução para exibir a página sem barras de rolagem.

por Luiz Henrique de Jesus Correia
| 17.4k xp | 3 posts

Oi Jefferson, tive o mesmo problema. Consegui resolver da seguinte forma:

  • Removi margin: 10% 15%; e o justify-content: space-between; do .apresentacao ;
  • adicionei as seguintes linhas na classe .apresentacao: 
    justify-content: center;
height: 100%;
gap: 62px;
por Manu Pantoja
| 34.1k xp | 7 posts

Boa Luiz Henrique funcionou no meu. Estava com mesmo problema!

por Gustavo Henrique Morais Mascena
| 37.1k xp | 3 posts

O meu tinha ficado diferente do deles também, acho que tão programando num monitor muito grande, no meu notebook as soluções do Luiz Henrique funcionaram. Eu só troquei o gap pra 5%.

por Caio Macêdo Monteiro
| 75.7k xp | 3 posts

Valeu, Luiz!