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

Asked

Viewed 147 times

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 and my structure. For a 1080p screen the 20% is enough to display the items I have inside the div t1. However when I open on a 720p screen it cuts a part of the items. as in the image below:

Figura 1

As you can see, part t1 is the one with the search bar and the blue button that hardly appears. As the screen is smaller the 20% were not enough to display the 2 items (search bar and blue button). I wonder if there’s a way that he calculates that percentage automatically so that he doesn’t cut one because it doesn’t fit in the 20%. that is to change these percentages according to the necessary (due to screen resolution)

css css3 bootstrap-3

  • Strange this behavior, because if you are using %, regardless of the screen size, the div t1, will always be 20% high.

  • yes. However I believe that the components are not responsive. and in a smaller screen occupy more than 20% of the screen.

1 answer

0

Only with CSS you won’t be able to do this because it has no way of knowing the height of the elements dynamically. As you are using Bootstrap, a small jQuery code will solve the problem by adjusting the div down automatically according to the height of the div father and of div from above.

Just enter 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 in operation:

$(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>
<div class="pai">
   <div class="t1">
      itens
      <br>
      mais itens  
   </div>
   <div class="t2">
      itens2
   </div>
</div>

Browser other questions tagged css css3 bootstrap-3

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