Question

我需要在没有固定高度的情况下获得可滚动的div高度。

FIDDLE ：http://jsfiddle.net/Msy4E/1/

HTML：

<div class="lower-content">
            <div class="col-1">
                <h2><strong>Sales Calendar</strong></h2>
                <div class="scrollbox">
                    <h4>FEBRUARY</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Fri-Mon, Feb 14-17</span><br />
                    <h4>MARCH - APRIL</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Mar 15-Apr 19</span><br />
                    <h4>MAY</h4>
                    <span>Memorial Day Weekend Sale</span><br />
                    <span>Fri-Mon, May 23-26</span><br />
                    <h4>JUNE</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>June 1-30</span><br />
                    <h4>JULY</h4>
                    <span>July 4th Summer Sale</span><br />
                    <span>Thu-Sun, July 3-6</span><br />
                    <h4>AUGUST</h4>
                    <span>Presidents' Day Sale</span><br />
                    <span>Aug 1-31</span><br />
                    <h4>SEPTEMBER</h4>
                    <span>Labor Day Weekend Sale</span><br />
                    <span>Fri-Mon, Aug 29-Sept 1</span><br />
                    <span>Presidents' Day Sale</span><br />
                    <span>Sept 15-Oct 25</span><br />
                    <h4>OCTOBER</h4>
                    <span>Columbus Day Sale</span><br />
                    <span>Fri-Mon, Oct 10 - 13</span><br />
                    <h4>NOVEMBER</h4>
                    <span>Presidents' Day Sale Holiday Preview</span><br />
                    <span>Nov 1-20</span><br />
                    <span>Black Friday Preview Days</span><br />
                    <span>Sat-Wed, Nov 22-26</span><br />
                    <span>After-Thanksgiving Sale</span><br />
                    <span>Thu-Sun, Nov 27-30</span><br />
                    <h4>DECEMBER</h4>
                    <span>Last Minute Style Deals</span><br />
                    <span>Dec 14-25</span><br />
                    <span>After-Holiday Sales</span><br />
                    <span>Fri, Dec 26 - Fri, Jan 2</span><br /><br />
               </div>
            </div>
  </div>

CSS ：

  .lower-content {
      border-top: 1px solid #b2b2b2;
      margin: 1% auto 0;
       padding: 1% 0 0;
      width: 1200px;
  }

  .lower-content .col-1 {
     height: 100%;
     position: relative;
     width: 27%;
  }
  .lower-content .col-1 .scrollbox {
      font-size: 1.2em;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: auto;
  }

Answer 1

只需尝试将.scrollbox设置为100％的高度？这可能会成功，因为它应该扩展以填充它的父级，.col-1

height: 100%;

Answer 2

如果我理解你的问题，你可以使用padding-bottom：100％

http://jsfiddle.net/Msy4E/3/

.lower-content {
  border-top: 1px solid #b2b2b2;
  margin: 1% auto 0;
  padding: 1% 0 0;
  width: 1200px;
}

.lower-content .col-1 {
  height: 100%;
  position: relative;
  width: 27%;
  padding-bottom:100%;
  background:lightgray;
}
.lower-content .col-1 .scrollbox {
  font-size: 1.2em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

Answer 3

.scrollbox显然与其父.col-1具有相同的尺寸，因为它绝对定位为顶部，右侧，底部和左侧值为0。在你的小提琴（http://jsfiddle.net/NLkGp/）中，我在.col-1上添加了一个红色边框，在.scrollbox上添加了一个绿色边框，你会发现它们的大小相同。

当您的意图是滚动框使用窗口顶部到底部的所有可用空间时，您必须确保父元素使用所有可用空间。
一个简单的解决方案是将专用高度添加到.col-1，例如height: 400px代替height: 100%。

（相对高度始终使用其内容的高度作为参考，这是仅标题，因为滚动框具有绝对定位。）

没有固定高度的可滚动div无法正常工作

3 个答案: