In my design, I have a main container div with a set height (which may change depending on css media query). There is also a parent div where the user can input a height value (usually in percentage, occasionally in pixels). The child divs allow the user to enter percentage and pixel values for their heights.
My goal is:
If the user does not set a height for the parent div, all child divs should adjust their height based on their content.
If the user sets a height for the parent div but not for the children, the child divs should be evenly distributed.
I have achieved points 1 and 2.
Now I am working on the following:
- If the user sets a height for the parent div, all child divs should be divided evenly, except for those with specific height values set by the user.
Here is a link to a fiddle showing my current progress:
http://jsfiddle.net/andyderuyter/qepqdmer/
$('.child').each(function() {
var numOfDivs = $(".child").length;
var parentHeight = $(this).parent().height();
var newChildHeight = parentHeight / numOfDivs;
var hasHeightValue = $(this).height().length;
if (parentHeight == 700) {
$('.child').height(newChildHeight);
}
});.grandparent {
height: 700px;
}
.parent {
height: 100%;
background-color: black;
text-align: center;
}
.child-1 {
background-color: orange;
}
.child-2 {
background-color: purple;
color: white;
}
.child-3 {
background-color: violet;
}
.vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
<div class="parent">
<div class="child child-1">
<div class="vertical">Div 1</div>
</div>
<div class="child child-2">
<div class="vertical">Div 2</div>
</div>
<div class="child child-3" style="height:25%;">
<div class="vertical">Div 3</div>
</div>
</div>
</div>