Set child width relative to its parents height in pure css

how to make child divs always fit inside parent div
css parent width of child
child div fill parent height
css get parent width
set child to height of parent
css calc parent width
child div exceeding parent div height
flexbox make child height of parent

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.

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>

Set child width relative to its parents height in pure 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​  One of the common CSS techniques that can be a bit tricky at first is being able to absolutely position a child div element within a parent div container, relative to the parent.

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>

Fluid Width Equal Height Columns, Equal height columns have been a need of web designers forever. The idea is to set the parent wrapper with relative positioning. position: relative; width: 27%​; padding: 3%; float: left; } .pseudo-three-col .col:nth-child(1) { left: 33%; } I've come up with a new pure CSS cross browser solution that you may be interested in:  If you need a designed scroll bar, and it should be as high as its parent’s height, but should also start from a certain offset: top:5px; right:5px; bottom:5px; width:20px; will fix its position. Example. Sticky header and footer, by stretching the content area from header’s end to footer’s start. Example:

Since the parent element is a fixed height (in your example either 100px or 200px) you can just make at selector for the child as well.

.parent > .child {
  position: absolute;
  height: 20%;
  width: 20px;
}

.resized > .child {
  position: absolute;
  height: 20%;
  width: 10px;
}

How to auto adjust the <div> height according to content in it , How do I make my Div 100 height relative to parents? DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts. The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem.

CSS clip property, Which of the following is the syntax of the clip property? With Known % Width. Let’s say the parent container was 60% wide and centered. That means there is 20% width on either side of it. But margin is calculated based on the parent element, so to pull it to the left 20% of the browser window, you’d need 1/3 of the width of the parent, so…

Split Div Into 2 Columns Using CSS, How do I divide a div into two columns in HTML? The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and default for YouTube videos).

Centering in the Unknown, Harder: Unknown Child If we set up a “ghost” element inside the parent that is 100% height, then we This parent can be any width and height */ .block { text-​align: center; /* May want to do size of the child is known, then there is another method of centering via pure CSS: Centering Percentage Width/Height Elements. height:auto; means let the height be determined but the element’s content NOT the parent’s height ( this behavior just doesn’t exist unless you set a specific height on the parent ( and I

Comments
  • I added a full sample where the height of child div is actually set to 10% of parent div height in my original answer. Please check out the new sample and the answer.
  • no need to define the variable at root level, you can simply use the default value : jsfiddle.net/1hjp058o
  • what about var() browser support?
  • @RajnishCoder Added a note at the end of the answer. Cheers.