Question

好吧，我有一个div应该是一个用于控制其他div中的东西的小部件。

它应位于上面（如在z-index中）所有其他内容，并且必须与视口顶部的特定距离（例如，10em）。由于页面可能不超过视口，因此它可以是position：fixed或position：absolute。现在，我希望它具有可变高度（取决于内容），但也具有最小高度，并且永远不会比视口底部的5 em更接近。

我想写的是：

.myDiv {
position: absolute;
top: 10em;
min-height: 8em;
max-height: 100% - 15em;  //which doesn't work
overflow: auto;
}

只有这样才能使用css吗？

Answer 1

显然不可能单独使用css。我现在正在使用javascript。这是代码：

//within a prototype.js environment
var innerHeight = (typeof window.innerHeight === 'undefined') ? document.documentElement.clientHeight : window.innerHeight;
var emSize = parseFloat($(document.body).getStyle('font-size'));
someElement.style['maxHeight'] = (innerHeight - (14 * emSize)).toString() + 'px';

Answer 2

为什么不简单地使用max-height:98%;？

这样你底部总会有一些空间（但不是一个固定的空间）。

我认为将固定空间设置为固定空间的唯一方法是使用javascript获取视口高度并相应地设置窗口小部件的最大高度。

Answer 3

我认为你过于复杂了。为什么不尝试这个。它只是在顶部添加一个小填充，或者如果你想要你可以使用margin-top取决于你的其他div正在做什么。

.myDiv  {

postion: absolut;
padding-top: 10em;
min-height: 100px;
max-height: 98%;
overflow: auto;

Answer 4

虽然为时已晚，但为了帮助其他人搜索此内容，您可以使用css3的calc()功能。它可以像下面这样使用 -

.myDiv {
  position: absolute;
  top: 10em;
  min-height: 8em;
  max-height: calc(100% - 15em);
  overflow: auto;
}

旧版浏览器不支持此功能，我们可以在其中包含以下任何数学运算符 - + - * /

Answer 5

蒂姆，

首先，我不确定你为什么要使用它，但是我认为无论你有什么用。

你几乎就在那里，这里是我曾经做过你想要的代码，唯一的事情是，我使用的是％而不是视口的btm中的固定版本。我认为它的行为与你寻求的方式相同。

`.myDiv {
position:absolute;
color:#fff;
background:#000;
top:20px;
width:150px;
min-height: 100px;
max-height: 90%;
overflow:auto;
}`

`<div class="myDiv">  
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>  
</div>`

我希望这就是你要找的东西！

check it out here

可变高度DIV与顶部和顶部的距离最小。视口的底部

5 个答案: