Question 199512 in Html Question posted in
Some basic documentation can be found here.

Html – Setting a child's height to a percentage of the parents height that is using min-height

HTML PART:

<div class="parent-one">
 <div class="child-one">
  <p>Some Text...</p>
 </div>
</div>

CSS PART:

.parent-one {
 min-height: 100vh;
width: 100%
}

.child-one {
 // min-height: inherit // This works and sets child height to 100vh
 // min-height: 30% // This does not work
 // height: 30% // This does not work
}

I have set the parent’s min-height to 100vh and need to set the child’s min-height (or height) to a percentage of the parent’s min-height. From the code example above, I tried 2 ways to achieve this but have been unsuccessful. Can you please tell me how I should go about setting the child’s min-height (and also what if I need to set the child’s height?)

Tags:

2

Answers


  1. 0

    To set the child’s height as a percentage of the parent’s height, you need to ensure that the parent has a specific height value, not just min-height. By default, the height of an element is determined by the height of its content unless otherwise specified.

    Here’s an updated code example that sets the child’s height as a percentage of the parent’s height:

    HTML:

    <div class="parent-one">
 <div class="child-one">
  <p>Some Text...</p>
 </div>
</div>

    CSS:

    .parent-one {
  height: 100vh; /* Set the parent's height to 100vh */
  width: 100%;
}

.child-one {
  height: 30%; /* Set the child's height as a percentage of the parent's height */
}

    In this code, the parent element .parent-one has its height explicitly set to 100vh. Then, the child element .child-one uses height: 30%; to specify that its height should be 30% of the parent’s height.

    Note that if you want to use min-height instead of height for the child element, you should ensure that the parent element has a specific height value (not just min-height) for the percentage calculation to work correctly.

    or you can try this

    .parent-one {
  min-height: 100vh;
  width: 100%;
}

.child-one {
  min-height: 30vh;
}
    Login or Signup to reply.
  2. 0

    Set .parent-one { display: grid; }:

    body {
  margin: 0;
}

.parent-one {
  min-height: 100vh;
  display: grid;
  align-items: start;
}

.child-one {
  background-color: green;
  min-height: 30%;
  /* this works too: */
  /* height: 30%; */
}
    <div class="parent-one">
  <div class="child-one">
    <p>Some Text...</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search