CODEWITHSUNDEEP
javascriptjquerycss
tanbog
tanbog

Reputation: 610

Dynamic div height for set of divs

I have a parent div and two children. I want the height of the children to remain constant at 75% and 25% of the parent height.

The issue I have is that I need the parent to have a height set by a background image. That is it should shrink responsively but always present the same area of the image.

Here is a a diagram of the behaviour:

enter image description here Child A contains text. To be totally honest I don't care how high child A is as long as the text is displayed. I need child B to maintain it's height as a proportion of the parent and its position at the bottom of the parent div.

I would like to know if there is a reasonable pure css solution to this problem.

Upvotes: 5

Views: 2007

Answers (3)

menaka
menaka

Reputation: 1068

This issue is addressed here 

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */

    position:relative;
}

Add these styles to child "div"

A div=>

width:100%;height:75%;background-color: lightblue;position:absolute; top:0; bottom:0; left:0

B div=>

width:100%;height:25%;background-color: green;position:absolute; top:75%; bottom:0; left:0; right:0;

Upvotes: 2

FDavidov
FDavidov

Reputation: 3675

I think you have a number of options:

If you are using AngularJS, you can set the height and width of the inner divs as $scope variables. Then, when the parent div changes size (you can trigger an event on it) you update the value of these variables. For instance:

<div style="height:{{Inner_Div_Top_Height}}>
   ...
</div>

and in your controller:

$scope.Inner_Div_Top_Height = <calculated height based on parent div's height> ;

Same for the lower div.

If, on the other hand, you are not using Angular, you will need to manually alter the style of the elements (inner divs). For instance:

document.getElementById("Inner_Upper_Div").style.height = <calculated height based on parent div's height> ;

Hope I understood your question correctly.

Upvotes: 0

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

here i have a jquery solution.

var h=$('#parentId').innerHeight;
$('#childA').css('height',h*(75/100)+'px');
$('#childB').css('height',h*(25/100)+'px');

using innerHeight method u can get height of any element .

Upvotes: 0

Related Questions