Bootstrap deixa espaço em branco abaixo

maurov · 26 de Maio de 2020, 15:34

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link href="/css/navbar-top.css" rel="stylesheet">
	<link href="/css/slidenav.css" rel="stylesheet">
<title>Teste</title>
</head>
<body>
<div class="container border p-0">
Olá pessoal do forum!
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/slidenav.js"></script>
</body>
</html>

Este script simples possui apenas os links e scripts remotos do bootstrap (+smooth dropdown), e dentro do container apenas o texto "Olá pessoal do forum".
E apenas com isso o navegador já monta a barra de rolagem.

Tem alguns tutoriais na web que sugerem editar nos CSS, mas como prefiro CDN, quero apenas usar os comando certos.
Alguém tem alguma sugestão?

Felix · 22 de Junho de 2020, 20:55

Para podermos ajudar, precisamos também dos conteúdos dos arquivos /css/navbar-top.css e /css/slidenav.css que estão em seu computador, possivelmente são eles que estão gerando a barra de rolagem que vc está falando, pois apenas com os CDN's que estão no html o resultado é este da imagem, sem nenhuma barra de rolagem

maurov · 23 de Junho de 2020, 08:58

Olá.
segue os CSS.

navbar-top.css

Código Selecionar


/* Show it's not fixed to the top */
body {
  min-height: 75rem;
}

slidenav.css

Código Selecionar

/* Slidenav 4.0.0-alpha.5 ( https://github.com/tightcode/slidenav ) */
@media (min-width: 768px) {
  .dropdown>div {
    position: absolute;
    clip: rect(0.5rem, 9999px, 9999px, -9999px);
  }
}

Felix · 23 de Junho de 2020, 13:10

Citação de: maurov online 23 de Junho de 2020, 08:58
Olá.
segue os CSS.

navbar-top.css

Código Selecionar Expandir
/* Show it's not fixed to the top */ body { min-height: 75rem; }
(...)

Aí está sua barra de rolagem, remova este código e ela não aparecerá no resultado final.

Editado: melhor ainda que apenas remover co código, brinque com ele para ver o que será alterado no resultado, comece alterando a medida de 75 para 10, 20, 50..., e veja o que acontece.

Altere também a unidade de medida, para px, %, etc...., é uma boa forma de aprender.

maurov · 23 de Junho de 2020, 16:27

Felix,
problema resolvido! Obrigado.
Li algumas matérias e parece que o bootstrap usa preferencialmente rem ao invés de px.

Aproveitando o tópico para aprender mais:
"1rem equals the font size of the html element (which for most browsers has a default value of 16px)".
Devo entender que uma página com 75 rem tem o tamanho mínimo de 75x16px = 1200px?

nota: Já vou marcar o tópico como resolvido.