Question

我已经找了很长时间才找到一个与我相同的问题，并且没有运气。大多数允许固定高度，而我的必须是百分比。

我正在使用谷歌Chrome测试版进行开发，而IE并不是我的首要任务列表。以下是我的代码的高度简化示例：

<!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>

问题是#inner超出了页面底部，而不是保持页面的高度。我不太确定如何解决这个问题。

Answer 1

在#container上，将max-height: 100%更改为height: 100%似乎有效。

然而，在应用此修复程序后，我不确定当#inner内只有几行内容时，页面中的其他元素看起来像你想要的那样。

如果这不是您想要的，我需要知道您希望页面在#inner内的内容不多的情况下的显示方式。是否允许更改HTML？

编辑：

尝试＃2：

这两个演示版具有相同的HTML / CSS，只是内容不同：
的 Long content
Short content

我没有更改您的HTML。

CSS更改：

+ #container {overflow: hidden; padding-right: 22px}

将#border {right: -21px}更改为#border {right: 1px}

Answer 2

我认为这可能是因为身体的边缘。如果我是对的，你只会滚动20像素。这段CSS应该修复它：

body { margin: 0; }

CSS Max-Height with Hidden Overflow

2 个答案: