製作引導區div可滾動

我在我的頁面上有一個div，我想添加大量信息，因此我希望它可以滾動。我曾嘗試使用溢出：滾動;並出現滾動條，但不允許用戶向下滾動瀏覽內容。製作引導區div可滾動

網站：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; 
}

來源

2016-03-03 user3005003

沒有要滾動的內容。內容適合盒子的高度。 –

如果你去檢查元素，你可以看到它不會滾動時，內容溢出 – user3005003

您在.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; 
}

來源

2016-03-03 14:09:02

你缺少在CSS中;爲info-div類，

height: 100%

應

height: 100%;

而且也是內容適合在height.You可以得到滾動條，如果高度設置爲任何特定的px。例如：

height: 400px;

來源

2016-03-03 14:03:17 getty

我相信你需要使它看起來像這樣添加一個高度值。

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

如果您將檢查器中的高度限制爲400像素，那麼滾動工作。目前沒有足夠的內容達到您設置的最大高度，因此不需要滾動。

但是，我認爲你的雲動畫正在放慢向下滾動，使其「突出」。我沒有解決這個問題的辦法。它可能只是我的瀏覽器（Chrome）

來源

2016-03-03 14:06:34

製作引導區div可滾動

回答

相關問題