Menu
Since I am new to webprogramming, i have not yet gained much experience in css. Currently I am building a web application with a resizable header. Therefore I wanted to know if it is possible to set a child divs width relative to the height of its parent div.
I know how to handle the problem in javascript code, but I would prefer a pure css solution.
The css code would look something like this:
.parent {
position: relative;
height: 200px;
width: 600px;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: 10% [of parent height];
}
The HTML code looks like this:
<div class="parent">
<div class="child"></div>
</div>
Currently the childs width stays the same, since the width of the parent stays the same. I would like the childs width to get smaller when the parent height resizes.
Thanks in advance.
240
Just assign your parent's height property value to a css variable and then use calc() to assign your child element's width to a value that is 10% of your parent's height.
Check and run the Code Snippet below for a practical example of what I have described above:
.parent {
position: relative;
--parentHeight: 300px;
height: var(--parentHeight);
width: 600px;
background-color: red;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: calc(var(--parentHeight) / 10);
background-color: green;
}<div class="parent">
<div class="child"></div>
</div>N.B. In case you need backward-compatibility for IE11, you can use a polyfill as shown in the top answer on this other SO thread.
181
Your child width and height when given in % will work, but they will be determined using the corresponding dimension of parent. So, if child div width is 10% then it will size to 10% of parent div, and if height is 20% then child div will have a height that is 20% of its parent div.
You can see this happening in following sample: sample code with border styles to distinguish between child and parent divs
Setting width to 10% of parent height using jquery
If you want to set width of child div to a percent of its parent height then you will need a jQuery ui approach as in following sample: Resize width to 10% of parent div height sample.
For above sample, you need to include jquery, jquery ui and jquery ui css files; then simply call resizable method on the jquery object for the parent div ( $(".parent").resizable()) and define an event when resizing stops for parent div. In this stop event you can write code so width of child div is 10% of parent div height.
The main code that you need to understand is as given below. In jquery's ready event i.e. when all dom elements are ready, you need to make the parent div resizable and then define the stop resize event for this. Note that I am using class selector for parent and child divs i.e. $(".parent") and $(".child").
$(document).ready(function() {
$(".parent").resizable( {
stop : function(e, ui) {
alert("stopped");
//resize the child div now
var childHeight =0.1 * $(".parent").height();
$(".child").width(childHeight);
}
});
});
If you would like to play with above sample on your computer then simply use the page markup/code as below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style>
.parent {
position: relative;
height: 200px;
width: 600px;
border: 1px solid red;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: 10%;
border: 1px solid green;
}
</style>
<script>
$(document).ready(function() {
$(".parent").draggable().resizable( {
stop: function(e, ui) {
$(".child").width($(".parent").height() * 0.1);
}
});
});
</script>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
