HTML Problema com o Scroll

Eduardo Garrix · 27 de abril de 2019

Alguém me ajuda com esse código? estou com problema no scroll do meu site e eu notei que é neste código pois depois que eu fiz ele foi que apareceu o Scrollbar inferior

<div class="ladodireito">
		<img src="http://pelscorp.com.br/wp-content/uploads/contato/maleta.png" style="height:27px; width:26x;" > Informações Legais
		 <h5> CNPJ:00.000.000/0000-00</h5>
			
		</div>

Minha intenção é que não fique a scrollbar inferior na minha pagina. só quando necessário

ps: com o scroll minha pagina vai até o além.

GabrielSennaMs · 27 de abril de 2019

@Eduardo Garrix Vai ser necessário mais informação da sua página para poder te ajudar, porém você pode usar "Overflow" no seu BODY ou no elemento que está criando o scroll.

Aqui tem um Tutorial de como usar Overflow

Eduardo Garrix · 27 de abril de 2019

@GabrielSennaMs http://pelscorp.com.br/contato.php da uma olhada aqui

tentei usar o overflow lá na div não funcionou

usei overflow: hidden; no CSS, não funcionou também.

GabrielSennaMs · 27 de abril de 2019

@Eduardo GarrixEssa sua class "ladodireito" está aplicando um "left: 70%", remove isso é o Scroll vai sumir.

Você deve adicionar o Overflow no seu BODY ele é o responsável pelo scroll da página.

overflow-x: hidden;

Utilize o overflow-x para remover somente o scroll horizontal

Eduardo Garrix · 27 de abril de 2019

1 minuto atrás, GabrielSennaMs disse:

Essa sua class "ladodireito" está aplicando um "left: 70%", remove isso é o Scroll vai sumir

mas dai o objetivo séria criar uma tabela lá e posicionar a esquerda, só que desse modo o Scroll ficou aparecendo

GabrielSennaMs · 27 de abril de 2019

Você tem outras maneiras de alinhar o conteúdo, você pode usar Flex-Box ou CSS Grid para isso.

E utilizar o "left" para alinhar o conteúdo vai deixar sua página quebrada.

Eduardo Garrix · 27 de abril de 2019

@GabrielSennaMs Eu queria estruturar da seguinte forma

do lado esquerdo vai ter uma coluna com um formulário de contato.

lado direito terá 3 colunas estruturadas uma em cima da outra

endereço

contato

informação legal da empresa

já criei no HTML tudo certo, mas no CSS usando o left não estou fazendo certo, o que eu poderia usar? acho que eu ainda não aprendi a posicionar do modo correto.

GabrielSennaMs · 27 de abril de 2019

Bom você pode usar Flex-box ou CSS Grid para posicionar os elemento corretamente, vou passar um exemplo de como fazer uma grid simples.

<!DOCTYPE html>
<html>
<head>
	<title>RWD GRID</title>
	<style type="text/css">

		.box{
			padding: 15px;
			border: red 3px solid;
		}

		.row::after {
		  	content: "";
		  	clear: both;
		  	display: table;
		  	overflow: hidden;
		}	

		[class*="col-"]{
			float: left;
		}

		/* Para Desktop: */
		.col-1 {width: 8.33%;}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}

		@media only screen and (max-width: 560px) {
			/* Para Celular */
			[class*="col-"]{
				width: 100%;
			}
		}

	</style>
</head>
<body>
	<div style="max-width: 1000px; margin: 0 auto;">
		<div class="row">
			<div class="col-9">
				<div class="box">
					LEFT
				</div>
			</div>
			<div class="col-3">
				<div class="box">
					RIGHT
				</div>
			</div>
		</div>
	</div>
</body>
</html>