滚动div没有固定高度 [英] Scrolling div without fixed height

问题描述

我需要构建一个动态调整大小的滚动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

这篇关于滚动div没有固定高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！