CSS Max-Height with Hidden Overflow
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 fix开发者_高级运维ed-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.
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}
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; }
加载中,请稍侯......
精彩评论