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

Answer 1

您在.info-div课程中缺少分号，这会导致您的css无效且height属性无法设置。

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

所以在height:100%之后添加一个分号，并将position更改为absolute和width:100%;。试试这个

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

Answer 2

您在;课程的CSS中缺少info-div，

  height: 100%

应该是

  height: 100%;

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

 height: 400px;

Answer 3

我相信你需要添加一个高度值，使它看起来像这样。

height:400px;
height:100%;
max-height:1340px;

如果将检查器中的高度限制为400px，则滚动起作用。目前没有足够的内容达到您设置的最大高度，因此无需滚动。

然而，我认为你的云动画正在减慢向下滚动以使其“juttery”。我害怕，我没有解决方案。它可能只是我的浏览器（Chrome）

Answer 4

使用引导程序，您可以在 div 上添加 class="overflow-auto"。

<div class="info-div overflow-auto">

使引导div可滚动

4 个答案: