Height of total div proportional to content

Asked

Viewed 293 times

1

I have the following structure:

<div class="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="_imgs/_slideShow/1.png" />
       <img src="_imgs/_slideShow/2.png" />
       <img src="_imgs/_slideShow/3.png" />
     </div>
     <div class="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>
TESTE

I wonder if there is a way to make the height of the div.slideShow, is automatically adjusted to the height of div’s from within.

The idea here is that the browser be adjusted (screen sizes) and the ratio remain.

Before the div.slideShow, there is only the body.

What I want to do is that as the screen is being resized, or pulling the brodas of the browser or even through predisposed screens (Nb’s, tablet’s, cell phones, etc...), the height of the div.slideShow, fits the height of your internal content that is already being resized correctly.

However, if I give fixed height to div.slideShow, when the images decrease in size, I will have problems.

Imagine the following situation: imagine div.img I have a imagem with 300px of height and decide to trade for another 400px of height or 200px. Keeping fixed height in div.slideShow, I will have problems. Hence the need for automatic adjustment.

How to solve this problem?

Below the running code:

$(document).ready(function(e) {

  quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
  contador = 0;
	
  $("div.slideShow div.boxSlide div.anterior").click(function() {
	  contador = contador==quantasImagens ?  -1 : contador;
	  contador++;
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("opacity",1);
  });
  
  $("div.slideShow div.boxSlide div.proximo").click(function() {
	  contador = contador==0 ? quantasImagens+1 :  contador;
	  contador--;
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("opacity",1);
  });
  
  $("div.slideShow div.contador span.contaSlide").click(function() {
	  index = $(this).index();
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(index).css("opacity",1);
  });
  
});
 * {
	 margin:0;
	 padding:0;
 }
  
div.slideShow {
	position: relative;
	width: 100%;
	height:300px;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
	position: relative;
	display: block;
	width: 100%;
}
div.slideShow div.boxSlide{
	height:277px;
}
div.slideShow div.boxSlide div.imagens img {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
}
div.slideShow div.boxSlide div.imagens img:first-child {
	opacity: 1;
}
div.slideShow div.boxSlide div.anterior,  
div.slideShow div.boxSlide div.proximo {
	position: absolute;
	display: block;
	top: 100px;
}
div.slideShow div.boxSlide div.anterior {
	left: 100px;
}
div.slideShow div.boxSlide div.proximo {
	right: 100px;
}
div.slideShow div.boxSlide div.anterior span, 
div.slideShow div.boxSlide div.proximo span {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan, 
div.slideShow div.boxSlide div.proximo span.boxSpan {
	background-color: rgb(200,200,200);
	opacity: .5;
	z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan, 
div.slideShow div.boxSlide div.proximo span.setaSpan {
	line-height: 30px;
	text-align: center;
	font-weight: bolder;
	cursor: pointer;
	z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
	opacity: 1;
}
div.slideShow div.contador {
	/*top:240px;*/
	background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(200,200,200);
	cursor: pointer;
	opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
	opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png" />
     </div>
     <div class="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>
oi

css3

2 answers

1


What does that is position: absolute that takes the normal flow element from the page. To solve without the position: absolute do so:

First in your class .boxSlide leave her with the height: auto to adapt to the content size:

div.slideShow div.boxSlide {
    height:auto;
}

Then remove the position: absolute of your images so that they return to the normal flow of the page and hide them with the display: none instead of opacity: 0 because then the images that are not showing will not take up space below:

div.slideShow div.boxSlide div.imagens img {
    width: 100%;
    height: auto;
    display: none;
}

And finally we leave the first image with display: block:

div.slideShow div.boxSlide div.imagens img:first-child {
    display: block;
}

Now in your Javascript instead of changing the opacity of the images we changed the display (do this in the other parts):

  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");

Working full code: 

$(document).ready(function(e) {

  quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
  contador = 0;
	
  $("div.slideShow div.boxSlide div.anterior").click(function() {
	  contador = contador==quantasImagens ?  -1 : contador;
	  contador++;
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");
  });
  
  $("div.slideShow div.boxSlide div.proximo").click(function() {
	  contador = contador==0 ? quantasImagens+1 :  contador;
	  contador--;
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");
  });
  
  $("div.slideShow div.contador span.contaSlide").click(function() {
	  index = $(this).index();
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(index).css("display", "block");
  });
  
});
* {
	 margin:0;
	 padding:0;
 }
  
div.slideShow {
	position: relative;
	width: 100%;
	height:300px;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
	position: relative;
	display: block;
	width: 100%;
}
div.slideShow div.boxSlide{
	height:auto;
}
div.slideShow div.boxSlide div.imagens img {
	width: 100%;
	height: auto;
	display: none;
}
div.slideShow div.boxSlide div.imagens img:first-child {
	display: block;
}
div.slideShow div.boxSlide div.anterior,  
div.slideShow div.boxSlide div.proximo {
	position: absolute;
	display: block;
	top: 100px;
}
div.slideShow div.boxSlide div.anterior {
	left: 100px;
}
div.slideShow div.boxSlide div.proximo {
	right: 100px;
}
div.slideShow div.boxSlide div.anterior span, 
div.slideShow div.boxSlide div.proximo span {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan, 
div.slideShow div.boxSlide div.proximo span.boxSpan {
	background-color: rgb(200,200,200);
	opacity: .5;
	z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan, 
div.slideShow div.boxSlide div.proximo span.setaSpan {
	line-height: 30px;
	text-align: center;
	font-weight: bolder;
	cursor: pointer;
	z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
	opacity: 1;
}
div.slideShow div.contador {
	/*top:240px;*/
	background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(200,200,200);
	cursor: pointer;
	opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
	opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png" />
     </div>
     <div class="anterior">
        <span class="setaSpan">anterior</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">proximo</span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>

  • then, but this is not solving. For if I put something below the div.total, this content on pro incio da div.total. Well, the images of div.img are with position Absolute and need to be so. That’s it?

  • Yes that’s exactly it, postion: Absolute causes the 'exit' element of the normal flow, so it does not fill the parent element

  • Is there any resource? I came up to put a div with clear:Both below but did not resolve

  • Do the following, edit your answer and in the menu that appears where you edit the text of the question click on Trecho Javascript/HTML/Css and add html/css code to the frames that appear, so we can 'see' your code running and it’s easier to help.

  • But as for position: Absolute does not help clear: Both, this works more for floats, probably will have to change this position: Absolute.

  • doubt completely here: https://answall.com/questions/247185/slideshow-n%C3%A3o-works-right-ap%C3%B3s-migrates%C3%A7%C3%A3o, I tried to minimize the problem in our topic. Code running here: http://hotplateprensas.com.br/stilos/slide.php

  • Let’s go continue this discussion in chat.

  • done according to your guidance. Note that, as the images have reduced in size accompanying the browser, the menu div has dropped a lot because of the fix height of the main div

  • OK join the chat, so it doesn’t get too long here.

  • One more little problem: this time with the arrows. Note that although both are positioned at 100px of the margins, although I switched here to 10%, the right margin kind of is not respecting this when we greatly decrease the browser

  • This escapes the main question but I will answer you in chat.

  • If you can give the question as answered thank you :)

  • certainty. By your solution, my mistake was in not turning display:One on the other div’s that were not being shown. So they were all display:block, pushing the others down. That was my mistake. Thank you very much!

  • On the div’s of arrows, the idea here was to create a square with background and opacity:0 and when passing the mouse over it, it appears with oacity:1

Show 9 more comments

0

Since the images have position: absolute, I would suggest that you height fixed to images, for example 500px and then gave the div that height.

  • I can’t. Exactly because of the responsive layout.

Browser other questions tagged css3

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