DIV that starts at the end of another div and goes to the end of the parent div

Question

DIV that starts at the end of another div and goes to the end of the parent div

Navigation

#1 by (0 votes)

0

I have the following structure:

<div class="pai">
   <div class="t1">
      itens
   </div>
   <div class="t2">
      itens2
   </div>
</div>

css

.pai{
   height:100%;
}
.t1{
   height:20%;
}
.t2{
   height:80%;
}

Basically this is my structure. For a 1080p screen the 20% are enough to display the items I have inside div t1. But when I open it on a 720p screen it cuts a portion of the items. as in the image below:

As you can see the part t1 is the one that has the search bar and the blue button that almost does not appear. As the screen is smaller the 20% were not enough to display the 2 items (search bar and blue button). I wonder if there is a way that he calculates this percentage automatically so he does not cut one because he does not fit in the 20%. or change these percentages as needed (due to screen resolution)

css css3 bootstrap-3

asked by anonymous 28.04.2018 / 18:00

1 answer

Today's Date Moments.js Add the record types of the POF - IBGE

score 0 · Answer 1

Only with CSS you will not be able to do this because it has no way to know the height of the elements dynamically. Since you are using Bootstrap, a small jQuery code will solve the problem by automatically setting%% down according to the height of% parent% and div above.

Just insert the code on your page:

$(window).on("load resize", function(){
   var t1_height = $(".t1").outerHeight(); // pega a altura de .t1
   var pai_height = $(".pai").outerHeight(); // pega a altura do .pai

   $(".t2").css({
      "height": pai_height-t1_height+"px"
   });
});

See working:

$(window).on("load resize", function(){
   var t1_height = $(".t1").outerHeight(); // pega a altura de .t1
   var pai_height = $(".pai").outerHeight(); // pega a altura do .pai
   
   $(".t2").css({
      "height": pai_height-t1_height+"px"
   });
});

html, body{
   height: 100%;
   margin: 0;
}
.pai{
   height:100%;
   background: yellow;
}
.t1{
   background: red;
}
.t2{
   background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="pai">
   <div class="t1">
      itens
      <br>
      mais itens  
   </div>
   <div class="t2">
      itens2
   </div>
</div>