Basic Height Percentage

CSS – why doesn’t percentage height work?

The height of a block element defaults to the height of the block's content. So, given something like this:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.

However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

Can I set the height of a div based on a percentage-based width?

This can be done with a CSS hack (see the other answers), but it can also be done very easily with JavaScript.

Set the div's width to (for example) 50%, use JavaScript to check its width, and then set the height accordingly. Here's a code example using jQuery:

$(function() {    var div = $('#dynamicheight');    var width = div.width();        div.css('height', width);});

#dynamicheight{    width: 50%;        /* Just for looks: */    background-color: cornflowerblue;    margin: 25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dynamicheight"></div>

Base percentage off height instead of width in css?

Without having full context of what you're trying to do, I'd guess CSS Flex is your best bet. The snippet I've attached shows you one method of centering an image inside a div when the image is not a full-sized background.

Keep in mind that this solution will need to be re-worked a little for your application.

.container {  border:1px solid red;  margin:0 auto;  display:flex;  height:500px;  width:500px;  justify-content:center;  align-items:center;}

<div class="container">
  <img src="https://www.w3schools.com/howto/img_fjords.jpg" width="100px" height="100px">  </div>

Flexbox height percentages

Use flex property instead of percentages.

html,body {  height: 100%;  margin: 0;  padding: 0;  text-align: center;}
.row_one {  background: blue;  flex: 3}
.row_two {  background: wheat;  flex: 3;}
.row_three {  background: yellow;  flex: 4;}
.fill-height-or-more {  min-height: 100%;  display: flex;  flex-direction: column;}
.fill-height-or-more > div {  display: flex;  flex-direction: column;  justify-content: center;}

<section class="some-area fill-height-or-more">  <div class="row_one">    Row 1  </div>  <div class="row_two">    Row 2  </div>  <div class="row_three">    Row 3  </div></section>

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

percentage height to child inside of parent element with view port height does not work

There are two issues preventing your code from doing what you want:

Class names cannot contain certain characters, like percent signs and as user 3in0 mentioned - square brackets which can be confused with the CSS attribute selector.
Percentage heights are based on the parent's height, but not it's min/max height, which are not factored into the calculation. I assume you are using min-height given the classname, so your 90% child height will be 90% of auto (inital/default value). Auto essentially means 'whatever height you need' - 90% of auto = auto.

.min-h-80vh {
  background-color: seagreen;
  height: 80vh;
}

.h-90 {
  background-color: coral;
  height: 90%;
}

<div class="min-h-80vh">
  <div class="h-90">test</div>
</div>

css percentage width and height on header

You could float the div with class="basic" to float:left and the div with class="nav" have margin-left:15%. Also, will need to remove the width:85% from the div with class nav.

JsFiddle sample

Might not be a simple fix without the float on div class="basic"

Hope this helps.

Percentage Height HTML 5/CSS

I am trying to set a div to a certain percentage height in CSS

Percentage of what?

To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.

So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.

(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)

Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):

div {
    height:100vh; 
}

See here for more info.

use both height and min height, and both in percent

Demo

You can set height to auto and min-height to 100%. That is, only if the inner div has static position.

.outer {
    height: auto;
    background:red;
    min-height: 100%;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto; /* or 0 if you want to maintain its position in the upper-left corner */
    padding-top: 30%;
}