Question

我有一个div（位置：固定），具有不同的高度，具体取决于其中的内容。要为其添加自动滚动，我已添加overflow-y:auto并指定了固定高度。

有没有办法自动设置div的高度，以便当浏览器空间发生变化时，div的高度会相应地改变，如果没有足够的空间，滚动条会出现，并且当有足够的可用空间时滚动条消失。

Answer 1

使用position:absolute代替position: fixed并使用左上角，右下角坐标并将滚动设置为自动;

示例 HTML ：

<div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

<强> CSS：

#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

工作示例：Here

Answer 2

使用两个DIV，一个嵌套在另一个内部。

外部DIV应设置为position:fixed;max-height:100%;overflow-y:auto

内部DIV将包含您的内容。据我所知，它不需要任何特定的样式。

应该发生什么（以及我在浏览器中测试此修复程序时发生的情况）是外部DIV应该收缩包装以适应内部DIV - 但它不会超过窗口的高度。如果内部DIV超过窗口的高度，它也将超过外部DIV的高度，从而产生滚动条。

编辑：示例标记：

<div id="outer">
   <div class="inner">
      Content goes here.
   </div>
</div>

CSS：

#outer{
   position:fixed;
   max-height:100%;
   overflow-y:auto;
   bottom:0; /* sample value */
   left:0;   /* sample value */
}
#outer div.inner{
   /* Whatever style you want the positioned box
      to have. Border, padding, background, etc. */
}

Answer 3

您可以在窗口上收听resize事件并相应地更新宽度。

$(window).resize(function() {

});

http://api.jquery.com/resize/

或者，根据页面的布局，您可以使用height: 100%（或其他适用于您的％）。

如何设置div以使用可用的浏览器高度自动调整其高度

3 个答案:

工作示例：Here