当前位置：文江博客话题详情

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

发布于 2024-11-08 05:35:22 字数 188 浏览 2 评论 0原文

我有一个 div (position:fixed)，其高度根据其中的内容而变化。为了实现自动滚动，我添加了 overflow-y:auto 并分配了固定高度。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

同展鸳鸯锦 2024-11-15 05:35:22

使用 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;}

工作示例：此处

use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;

example 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;}

Working Example : Here

回复收藏 0 原文

一桥轻雨一伞开 2024-11-15 05:35:22

使用两个 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. */
}

Use two DIVs, one nested inside of the other.

The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto

The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.

What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.

EDIT: Sample markup:

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

And the 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. */
}

回复收藏 0 原文