The problem is this: there is a block

<div class="main" style="height: auto"> <div style="height: 100px"></div> </div>

The parent div (with the class 'main') will have a height of 100px (as in the child)

How to make 'main' have half its height (50px)?

On pseudocode it will look something like this.

  height: auto/2;
  • There is a suspicion that this is possible only by calculations for js - andreymal
  • one
    as an option - jsfiddle.net/a5meetta - soledar10

3 answers 3

I think in this case it is best to use height: 50%;

  • 50% is half the height of the parent, not half of its height - DcoartB

I through JS solved such questions, perhaps not correctly works

  $(".main").css("height", function(){ var height = $(".main_bl").height() *2; return height;}) 
 .main_bl{ border:1px solid blue; } .main{ height:auto; border:1px solid red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div style="" class="main_bl"> ТЕКСТ ТЕКСТ </div> </div>

  • and if the height is unknown? - DcoartB
  • at any height, the block with the main class will be two higher than main_bl. deleted the height now and just finished the text - klifort
 .main { height: 50%; }

should work