CSS Max-Height with Hidden Overflow

Question

I've looked for quite some time now to find a question identical to mine, and have had no luck. Most of those allowed for fixed-heights whereas mine has to be percentages.

I'm using Google Chrome Beta for development, and IE is not at the top of my priority list. Below is a highly simplified example of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head>
<title></title>
<style type="text/css">
#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    min-height: 64px;
    max-height: 100%;
}

#inner {
    overflow: hidden;
    min-height: 64px;
    max-height: 100%;
}

#border {
    position: absolute;
    top: 20px;
    right: -21px;
    width: 20px;
    bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
    <div id="inner">
        <!-- Content -->
    </div>
    <div id="border">
        <!-- Border Content -->
    </div>
</div>
</body>
</html>

The problem is that #inner extends beyond the bottom of the page, instead of remaining the height of the page. I'm not quite sure how to fix this.

Could you make a [JS Bin](http://jsbin.com/) or [jsFiddle](http://jsfiddle.net/) showing the problem? — thirtydot, Jan 01 '11 at 21:56

thirtydot · Accepted Answer · 2011-01-01T23:07:44.743

3

On #container, changing max-height: 100% to height: 100% seems to work.

However, after applying this fix I'm not sure that the other elements in your page look as you intend when there is only a few lines of content inside #inner.

If this isn't quite what you want, I need to know how you want your page to look where there is not much content inside #inner. Also, is it permitted to change the HTML?

Edit:

Attempt #2:

These two demos have the same HTML/CSS as each other, just with a different amount of content:
Long content
Short content

I didn't change your HTML.

CSS changes:

+ #container {overflow: hidden; padding-right: 22px}
changed #border {right: -21px} to #border {right: 1px}

edited Jan 01 '11 at 23:07

answered Jan 01 '11 at 22:21

thirtydot

217,782
47
385
346

Unfortunately, using height instead of max-height does not work, it should shrink to fit the content, instead of always conforming to the height of the page. Also, I'm not sure what you mean by "it is permitted to change the HTML?" – skeggse Jan 01 '11 at 22:49
It means: Can I change your HTML code (instead of just your CSS)? – thirtydot Jan 01 '11 at 22:50
You can go ahead and change any and all code you see there. There won't be any text inside #inner, but rather a background image. – skeggse Jan 01 '11 at 22:55

score 0 · Answer 2 · answered Jan 01 '11 at 21:55

0

I think it may be because of the margin on the body. If I'm right, you'll only be scrolling by 20 pixels. This piece of CSS should fix it:

body { margin: 0; }

answered Jan 01 '11 at 21:55

James Long

4,437
1
18
30

That doesn't seem to do...anything. – skeggse Jan 01 '11 at 22:00

CSS Max-Height with Hidden Overflow

2 Answers2

Linked