Div Height in Percentage

Div Height in Percentage

It doesn't take the 50% of the whole page is because the "whole page" is only how tall your contents are. Change the enclosing html and body to 100% height and it will work.

html, body{
height: 100%;
}
div{
height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

Sample Image

^ Your document is only 20px high. 50% of 20px is 10px, and it is not what you expected.

Sample Image

^ Now if you change the height of the document to the height of the whole page (150px), 50% of 150px is 75px, then it will work.

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>

Setting multiple divs by height percent to fill parent div

Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:

http://jsfiddle.net/b6HVa/

#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}

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.

Why is percentage height not working on my div?

Use vh (viewport height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.

height:90vh;

try this code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
<div id="tabs" ng-controller="TabsDataCtrl">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>

<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>

<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers"></leaflet>
</div>
</div>
</body>
</html>

with css

<style>
#wrapper{height:60vh;}
#tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
#leaflet-map{width:78%; height:60vh; overflow-y:scroll; overflow-x:hidden;}
</style>

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 program the div height to be a certain percentage of it's current width?

There's the padding trick, already answered, but I use another approach, envolving two nested divs.

The parent one, I set the width. The child one, I use the height value as a container unit vw - (means viewport width).

It works well, see here (resize the viewport)

<div>
<div></div>
</div>

CSS:

div {
width: 100%;
}

div > div {
background: silver;
height: 10vw;
}


Related Topics



Leave a reply



Submit