使引导程序 div 可滚动

Question

我的页面一侧有一个 div，我想向其中添加很多信息，因此我希望它可以滚动。我试过使用 overflow: scroll;并且出现滚动条，但不允许用户向下滚动内容。

网站：explorecanterbury.co.uk

HTML

 <div class="info-div">
      <div class="col-md-5 col-md-offset-7 col-xs-6 col-xs-offset-6" style="background-color:orange;">
        <div class="close"><span class="close-btn"></spam></div>
          <div class="col-md-10">
            <h2 class="subtitle">Canterbury Cathedral</h1>
            <img src="img/test.jpg" class="img-responsive">
            <img src="img/test.jpg" class="img-responsive">
            <p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p>
            <h2 class="subtitle">Find out more...</h1>
            <p>SOCIAL MEDIA ICONS GO HERE</p>
            <h2 class="subtitle">Related Attractions</h1>
              <p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p>
              <p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p>
          </div>
        </div>
    </div>

CSS

 .info-div {
  position: relative;
  margin-top: -100px;
z-index: 10;
height: 100%
max-height: 1340px;
overflow-y: scroll;
}

@font-face {
  font-family: fundamental;
  src: url(file://C:/Users/Sara/Documents/ExploreCanterbury/fonts/FUNDR___.TTF);
}

.close-btn {
  background-image: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/close.png);
  width:18px;
  height:18px;
  display: block;
}

.close{
  margin-top: 20px;
}

.subtitle{
  font-size: 30px;
  margin: 0 0 30px;
    font-family: fundamental;
}

原文由 user2953989 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您在 .info-div 类中缺少分号，这会使您的 css 无效并且 height 属性不会被设置。

 .info-div {
  position: relative;
  margin-top: -100px;
  z-index: 10;
  height: 100%
  max-height: 1340px;
  overflow-y: scroll;
}

So add a semi-colon after height:100% , and change position to be absolute and width:100%; .试试这个

.info-div {
  position: absolute;
  width: 100%;
  margin-top: -100px;
  z-index: 10;
  height: 100%;
  max-height: 1340px;
  overflow-y: scroll;
}

原文由 user1846747 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您在 CSS 中缺少 ; info-div 类，

   height: 100%

应该

  height: 100%;

而且内容适合高度。如果高度设置为任何特定的 px ，您可以获得滚动条。例子：

  height: 400px;

原文由 getty 发布，翻译遵循 CC BY-SA 3.0 许可协议