CSS Percentage Widths and Heights and Resolution Problems

CSS percentage widths and heights and resolution problems

For Responsive Webdesign you really should be leveraging media queries

Personally I prefer pixels because they give me more control, and I can reliably know the exact dimensions of each element. With media queries you can also set new styles based on the screen resolution.

Percentages give you a nice responsive feel, but can be much more difficult to ensure you're layout is not junked by each level of resolution.

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.

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>

CSS Percentages And Pixels

% value in margin and padding is always % of the parent's width.

So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.

.container {  width: 100px;  background: green;}
.child25,.child45,.child-none{  background: yellow;}
.child25 {  margin-bottom: 25%;}
.child45 {  margin-bottom: 45%;}

<div class="container">  <div class="child25">This one should have 25px margin bottom.</div>  <div class="child45">This one should have 45px margin bottom.</div>  <div class="child-none">This one has no margin</div></div>

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>

Increase div's height above browser resolution with percentage

If i understand corectly,don't set any height value for the child divs.They should expand once the content grow,or you can just give a condition like a min-height.Also i suggest you to use vh,but only for the container.And if you want,you can set a width,i dont think it will cause any trouble,but keep it in mind that the divs will automatically have the full width of the parent div.

*{
  box-sizing:border-box;
}
html, body {
    height: 100%;
    min-height: 100%;
}
#container {
    width: 100%;
    height: 100vh;
}
#div1 {
    width: 100%;
}
#div2 {
    width: 100%;
}
#div3 {
    width: 100%;
}

The code above will make your container be 100% height of the viewport,and if your content it's bigger,the child divs will push each other and container div will be 100% height of the new viewport.

CSS Percentage Widths and Heights and Resolution Problems