Set child width relative to its parents height in pure css

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.


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>

Tags:

Html

Css

Recent Posts