滚动div没有固定高度

本文介绍了滚动div没有固定高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要构建一个动态调整大小的滚动div。

div应该动态调整大小以适合屏幕。但如果内容不适合在屏幕上，它应该显示一个滚动条。因此，浏览器自己的滚动条不应该成为活动的。

我可以通过在div中放置另一个div并使用 overflow：auto 。

< div id =gridcontainerstyle = ; height：300px; width：100px; > < div id =gridcontentstyle =height：100％> <！ - 在这里加载文本 - > < / div> < / div>

麻烦的是，这只有在第一个div具有固定高度时才起作用。我希望我可以设置第一个div到 height：100％，但很遗憾没有 - 这个属性似乎被忽略，滚动条不显示。 / p>

我试着把div放在一个有 height：100％的表中，并将第一个div设置为 height：auto ，希望它可以从其父级的高度。但是div仍然似乎忽略了height属性。

所以我的问题是：这可以使用html，或者 - 失败 - javascript？

解决方案

您可以使用绝对定位拉伸div 。这样，它总是占用浏览器窗口（或最接近的已定位祖先）的大小。

给定此HTML：

< div id =gridcontainer>< / div>

CSS应该是：

#gridcontainer { position：absolute; top：0; bottom：0;左：0; right：0; overflow：auto; }

演示

I need to build a dynamically-resizing scrolling div.

The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.

I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" > <div id="gridcontent" style="height:100%"> <!--Put loads of text in here--> </div> </div>

The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.

I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.

So my question is: Can this be done using just html, or- failing that- javascript?

解决方案

You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).

Given this HTML:

<div id="gridcontainer"></div>

the CSS should be something like:

#gridcontainer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }

Live Demo