0

Ola

Eu tou com um problema ao ajustar as minhas divs

Eu na div da esquerda tenho com que a altura seja a 100% do conteúdo e eu queria que a div do meio e a div da direita fosse do mesmo tamanho que a div da esquerda mas que não queria fazer com px, ha alguma forma de ajustar as outras duas div ao mesmo tamanho que a div da direita?

Eu utilizo os vh para a altura das outras duas divs mas queria mudar isso.

inserir a descrição da imagem aqui

.esquerda {
    height: 100%;
    background-image: url(/imagens/blackfundo2.jpg);
    padding: 35px 45px 35px 45px;
    text-align: center;
    background-size: 100%; 
}

.meio { 
    height: 100vh;
    background-color: #3E3E3E;
    padding: 0;
}

.direita {
    height: 100vh;
    background-image: url('imagens/blackfundo2.jpg');
    background-size: 100%;
    padding: 20px;
}
<div class="col-12 col-md-5 col-lg-3 esquerda">

    <h1 class="titulo1">Violência</h1>
    <h1 class="titulo12">doméstica</h1>
    <h1 class="titulo123">em portugal</h1>

<div class="Texto"> 
<h3> exemplo de texto </h3>
<h5 class="rage" >Todos os casos de violencia doméstica registados até á data currente em portugal no ano de 2019</h5>
</div>

<br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="filtroselects">
  <img src="/imagens/iconfiltro.png" height="40px" width="40px"> Filtros
</button>

<div id="escolha">
<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

<br>

    <div class="botesdefiltrar">
        <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
        <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
  </div>   
  </div>

  <br>

  <h5 id="denuncia">Caso saiba de algum caso de violencia doméstica
  <a href="https://www.cmjornal.pt/mais-cm/eu-reporter-cm?ref=geral_MenuHeader" class="denunciastyle" target="_blank">denuncie aqui</a>
  </h5> 

</div>

<div class="col-12 col-md-7 col-lg-6 meio">
</div>

<div class="col-12 col-lg-3 direita">
<div>

Obrigado a quem me tentou ajudar mas já consegui resolver, basicamente como estou a usar o boostrap automaticamente se tirar a altura ele ira se tentar adaptar a maior div que tenho logo as outras duas div vao ter o mesmo tamanho que a primeira div

4
  • Porque usas "height: 100vh;" em vez de "height: 100%;"?
    – Pbras
    27/05/2019 às 10:38
  • @Pbras pois se usar 100% de altura no mapa, o mapa vai desaparecer porque 100% de altura equivale ao conteúdo e o mapa não e propriamente um conteúdo extenso como o da div da esquerda.
    – David Mv
    27/05/2019 às 10:50
  • Mas o mapa é um iframe certo? Podes meter o tamanho de iframe com 100% de altura para ficar do mesmo tamanho.
    – Pbras
    27/05/2019 às 10:51
  • sim o mapa esta a 100% de altura da div por exemplo se a div tiver 100px de altura, o mapa vai ter 100px de altura mas se a div tiver 100% de altura e o mapa tambem nao vai ter tamanho nenhum pois cada um vai depender do outro e vai desaparecer.
    – David Mv
    27/05/2019 às 10:55

2 Respostas 2

4

Vc está usando Bootstrap. E aparentemente não está usando o Grid da maneira correta, pois vc não colocou as COl- dentro de um container com a classe ROW. a ROW tem display:flex e faz por padrão que todas as COL- tenham a mesma altura.

Então primeiro vc deve tirar esse 100VH que vc colocou, e depois coloca todo o conteúdo dentro da div com classe ROW. Seu código tb tinha várias divs que vc abriu, mas não fechou, então eu corrigi isso...

Execute em tela cheia para ver melhor o resultado

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<style>
		.esquerda {
			height: 100%;
			background-image: url(https://placecage.com/100/101);
			padding: 35px 45px 35px 45px;
			text-align: center;
			background-size: 100%;
		}

		.meio {
			/* height: 100vh; */
			background-color: #3E3E3E;
			padding: 0;
		}

		.direita {
			/* height: 100vh; */
			background-image: url(https://placecage.com/100/100);
			background-size: 100%;
			padding: 20px;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="row">
			<div class="col-12 col-md-5 col-lg-3 esquerda">

				<h1 class="titulo1">Violência</h1>
				<h1 class="titulo12">doméstica</h1>
				<h1 class="titulo123">em portugal</h1>

				<div class="Texto">
					<h3> exemplo de texto </h3>
					<h5 class="rage">Todos os casos de violencia doméstica registados até á data currente em portugal no
						ano de
						2019</h5>
				</div>

				<br>

				<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

				<button id="filtroselects">
					<img src="/imagens/iconfiltro.png" height="40px" width="40px"> Filtros
				</button>

				<div id="escolha">
					<form id="selectsfiltro">
						<h6>Faixa Etaria:</h6>
						<select id="FaixaEtaria" class="custom-select">
							<option></option>
							<option value="1">0-17</option>
							<option value="2">18-25</option>
							<option value="3">26-35</option>
							<option value="4">36 ou mais</option>
						</select>

						<br />
						<br />
						<h6>Sexo:</h6>
						<select id="Sexo" class="custom-select">
							<option></option>
							<option value="5">Masc</option>
							<option value="6">Fem</option>
						</select>

						<br />
						<br />
						<h6>Recurso a arma:</h6>
						<select id="RecursoArma" class="custom-select">
							<option></option>
							<option value="7">Sim</option>
							<option value="8">Não</option>
						</select>


						<br />
						<br />
						<h6>Localidade:</h6>
						<select id="Distrito" class="custom-select">
							<option></option>
							<option value="9">Viana do Castelo</option>
							<option value="10">Vila Real</option>
							<option value="11">Bragança</option>
							<option value="12">Braga</option>
							<option value="13">Porto</option>
							<option value="14">Aveiro</option>
							<option value="15">Viseu</option>
							<option value="16">Guarda</option>
							<option value="17">Coimbra</option>
							<option value="18">Castelo Branco</option>
							<option value="19">Leiria</option>
							<option value="20">Lisboa</option>
							<option value="21">Santarém</option>
							<option value="22">Portalegre</option>
							<option value="23">Évora</option>
							<option value="24">Setúbal</option>
							<option value="25">Beja</option>
							<option value="26">Faro</option>
							<option value="27">Açores</option>
							<option value="28">Madeira</option>
						</select>
					</form>

					<br>

					<div class="botesdefiltrar">
						<button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
						<button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
					</div>
				</div>

				<br>

				<h5 id="denuncia">Caso saiba de algum caso de violencia doméstica
					<a href="https://www.cmjornal.pt/mais-cm/eu-reporter-cm?ref=geral_MenuHeader" class="denunciastyle"
						target="_blank">denuncie aqui</a>
				</h5>

			</div>

			<div class="col-12 col-md-7 col-lg-6 meio">
			</div>

			<div class="col-12 col-lg-3 direita">
				<div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

4
  • agradeço a sua ajuda mas ja consegui resolver! a solução esta na pergunta em negrito
    – David Mv
    27/05/2019 às 11:53
  • @DavidMv legal! Se vc ler minha resposta vai ver que é justamente o que vc colocou ai em negrito! ;)
    – hugocsl
    27/05/2019 às 11:54
  • tem razão! peço desculpa!
    – David Mv
    27/05/2019 às 12:04
  • 1
    @DavidMv é que quando vc colocou 100VH vc limitou o tamanho da diva a 100VH, ela não cresceria mais que isso de forma alguma, ai não acompanhava o tamanho da div do lado que poderia ter mais de 100VH por exemplo. Abs
    – hugocsl
    27/05/2019 às 12:06
1

Onde voce está a colocar as classes esquerda, meio e direita coloque também um id com o mesmo nome exemplo: id="esquerda";

E insira o seguinte script no fim do seu ficheiro:

<script>
$(document).ready(function() {
    var alturaEsquerda = $(#esquerda).height()
    $(#meio).height(alturaEsquerda);
    $(#direita).height(alturaEsquerda);
});

$(window).resize(function(){
    var alturaEsquerda = $(#esquerda).height()
    $(#meio).height(alturaEsquerda );
    $(#direita).height(alturaEsquerda);
    });
}).resize();
</script>

O script vai buscar a altura do elemento da esquerda e atribui a altura igual aos elementos do meio e direita.

1
  • agradeço a sua ajuda mas ja consegui resolver! a solução esta na pergunta em negrito
    – David Mv
    27/05/2019 às 11:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .