Max-Height: X% Doesn't Work on Chrome

max-height: x% doesn't work on Chrome

Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.

You might prefer to use viewport units. You can learn about them on css-tricks and caniuse will show you how well it's supported.

Essentially you can say:

<div style="height: 55vh;">Hi</div>

meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height. Something that is 100vh will be 100% of the viewport's height.

Max-height works sometimes, but not always

You need to give the images parent p a height as well to make it work.

For an element to respect a height given in percent, its parent also must have a height, and if that as well is given in percent, the next parent etc. One often ends up with this rule html, body { margin: 0; height: 100%; }

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 How to set div height 100% minus nPx

Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.

For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"            "http://www.w3.org/TR/html4/strict.dtd"><html><head><title></title><style type="text/css"> *{margin:0px;padding:0px;overflow:hidden} div{position:absolute} div#header{top:0px;left:0px;right:0px;height:60px} div#wrapper{top:60px;left:0px;right:0px;bottom:0px;} div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}</style></head><body><div id="header"></div><div id="wrapper">  <div id="left"><div style="height:1000px">high content</div></div>  <div id="right"></div></div></body>

Why does this CSS not work in Firefox?

It seems to me that what you want to do is split your #wrapper in two.

The top portion, containing everything but #viewer_wrapper, should have its natural height. the bottom portion, containing #viewer_wrapper, should have height: 100%.

html

<div id="wrapper">
    ...
</div>
<div id="wrapper2">     
    <div id="viewer_wrapper">
        ...
    </div>
</div>

css

#wrapper2 { height:100%; }
#wrapper, #wrapper2 {
    width:70%;
    position:relative;
    padding:4px 10px;
    margin:0 auto;
    background:whiteSmoke;
    border-left:2px solid black;
    border-right:2px solid black;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
    box-sizing:border-box;
}

My content disappears when I set the HTML tag to 100% height

Your CSS is a huge mess.

First, avoid using position:fixed, especially on such large scale. Most mobile browsers don't "fix" those positions, and some older browsers render incorrectly with them.

height:100% means set the height to 100% of its parent container. However, which in this case is "container", which again is sized as 100% of its container, which is "body". As "body" does not have a height set on it, body's height gets calculated to be enough height to wrap the entire page.

Note: Setting height:100% on body doesn't work to make it scale to the entire window; you have to set position:absolute on body and make top/left/right/bottom zero to do that.

Back to the "body" height calculation. Notice that the sizing calculation does not include anything that is "floated", because when you "float" something, it takes it outside of the normal layout. Anything that is "floated" occupy no spacing!

Try this experiment: turn off overflow: hidden in your "container", and you'll see the height of "container" and "body" suddenly collapses into zero. All your elements are floated, so they take up no space if there is not overflow: hidden.

Thus, you whole mess of CSS is essentially telling "content" to size itself to 100% of the height of "container", which is 100% of "body", which is whatever height that is necessary to include all the content of the page. With overflow: hidden in "container", that height is the height of "content". Without overflow: hidden in "container", that height is zero.

If the height of "content" is 100% of zero, which is zero, and it does not itself have "overflow: hidden" set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.

There you go. Now you know why your orange doesn't extend all the way to the bottom of the screen. You were depending on height:100% on "body" to stretch it out to the full height of the screen; it doesn't work this way.

The solution?

DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS -- It is too much of a mess. You don't want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with position:absolute; left:0px; right:0px; top:0px; bottom:0px; on "body". This will stretch "body" to fill the whole window. Check it by setting a background color on "body".
Notice that #2 may not work on mobile browsers. You'll need to set a min-height in pixel value to make sure that it fills the whole screen.

Make nested div stretch to 100% of remaining container div height

I have spent way too much time trying to figure it out, but by George I've got it!

The "Eureka" moment was reading other questions where people were asking "how can I do it without using tables?" Because of course this layout is easy with tables. But that made me think of display:table.

As this blog post nicely argues, using display:table gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.

I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.

Voila!

Condensing just the essential code:

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body,
html {
  height: 100%;
}

.container {
  display: table;
  width: 100% height: 100%;
  /* this will be treated as a Minimum! It will stretch to fit content */
}

div.wrapper {
  display: table-row;
  height: 0px;
  /* take as little as possible, while still fitting content */
}

img {
  display: table-cell;
  width: 100%;
  /*scale to fit*/
}

.bottom {
  display: table-cell;
  height: 100%;
  /* take as much as possible */
}

<div class="container">
  <div class="wrapper">
    <img src="http://placekitten.com/600/250" />
  </div>
  <div class="bottom" contentEditable="true">
  </div>

Max-Height: X% Doesn't Work on Chrome