Css height in percent not working
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.
html, body { height: 100%; width: 100%; margin: 0; }div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>
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>
Height percentage not working in CSS
When you are using %
for width, or height, the 1st question you should ask is that 80%
of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS
html, body {
height: 100%;
}
So now your div
element will be 80%
of 100%
Demo
Side Note: Also when you are dealing with absolute
positioned elements, you may come across a scenario where your div
won't exceed the current viewport height, so in that case you need to have min-height
Div container height percentage not working
#bigwrap {
position: relative;
height: 70%;; //only need one semi-colon
}
The height has two semi-colons. But it still might not work. So if it doesnt work, try this:
body, html {
height: 100%;
}
Minimum height and height, or just height needs to be set to 100%.
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.
line-height as a percentage not working
line-height: 100%
means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px
, pt
, etc).
Related Topics
5 Images Symmetrically Seperated with Diagonal Lines
Retrieve Image from Ftp to Webpage
Options with Display:None Not Hidden in Ie
Href="Tel:" and Mobile Numbers
What Guidelines for HTML Email Design Are There
How to Select a Radio Button by Default
How to Resize an Image to Fit in the Browser Window
How to Force Table Cell <Td> Content to Wrap
Embed Youtube Video - Refused to Display in a Frame Because It Set 'X-Frame-Options' to 'Sameorigin'
Bug with Firefox - Disabled Attribute of Input Not Resetting When Refreshing
With a Browser, How to Know Which Decimal Separator Does the Operating System Use
CSS Only Animate Draw Circle with Border-Radius and Transparent Background
CSS Speech Bubble with Box Shadow
Can a Span Be Closed Using <Span />
Why Does Chrome Incorrectly Determine Page Is in a Different Language and Offer to Translate