Adjustment of the canvas in css [closed]

Asked

Viewed 185 times

0

Hello

I have a problem adjusting my Ivs

I in the left div have with that the height is 100% of the content and I wanted the middle div and the right div to be the same size as the left div but I did not want to do with px, there is some way to adjust the other two div to the same size as the right div?

I use the vhs for the height of the other two Divs but wanted to change this.

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>

Thanks to those who tried to help me but I’ve already solved, basically how I’m using boostrap automatically if I take the height it will try to adapt the biggest div I have so the other two div will be the same size as the first div

html css

  • Because you use "height: 100vh;" instead of "height: 100%;"?

  • @Pbras because if you use 100% height on the map, the map will disappear because 100% height equals the content and the map is not exactly an extensive content like the left div.

  • But the map is an iframe right? You can set the iframe size to 100% height to be the same size.

  • yes the map is at 100% div height for example if the div is 100px high, the map will be 100px high but if the div is 100% high and the map will not be any size either because each will depend on the other and will disappear.

2 answers

4


You are using Bootstrap. And apparently you are not using Grid in the right way, because you did not put the COl- within a container with class ROW. to ROW has display:flex and makes by default that all COL- are the same height.

So first you must take this 100VH that you put, and then put all the content inside the div classy ROW. Your code also had several divs that you opened but didn’t close, so I fixed it...

Run it in full screen to see the result better

<!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>

  • thanks for your help but I’ve already solved it! the solution is in the question in bold

  • @Davidmv cool! If you read my answer you will see that it is precisely what you put there in bold! ;)

  • you’re right! I’m sorry!

  • 1

    @Davidmv is that when you put 100VH you limited the size of the diva to 100VH, it would not grow more than that at all, ai did not follow the size of the side div that could have more than 100VH for example. Abs

1

Where Voce is placing the left, middle and right classes also put an id with the same example name: id="esquerda";

And insert the following script at the end of your file:

<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>

The script fetches the height of the left element and assigns the height equal to the middle and right elements.

  • thanks for your help but I’ve already solved it! the solution is in the question in bold

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.