twitter-bootstrap 使引导 div 可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35774016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a bootstrap div scrollable
提问by user2953989
I have a div on the side of my page that I want to add a lot of information to, therefore I want it to be scrollable. I have tried using overflow: scroll; and the scroll bar appears, but does not allow the user to scroll down through the content.
我的页面一侧有一个 div，我想向其中添加大量信息，因此我希望它可以滚动。我试过使用溢出：滚动；并且滚动条出现，但不允许用户向下滚动内容。
website: explorecanterbury.co.uk
网站： explorecanterbury.co.uk
HTML
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
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;
}
回答by
You are missing a semicolon in .info-divclass, which makes your css invalid and the heightproperty not to be set.
您在.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 positionto be absoluteand width:100%;. Try this
所以后添加一个分号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;
}
回答by getty
You are missing a ;in CSS for info-divclass,
你;在 CSS中缺少一个info-div类，
height: 100%
should be
应该
height: 100%;
And also the content is fit in the height.You can get scrollbar if height set to any certain px.
example:
并且内容适合高度px。如果高度设置为任何特定，您可以获得滚动条。例子：
height: 400px;
回答by Joe Green
I believe you need to add a height value so that it looks something like this.
我相信您需要添加一个高度值，使其看起来像这样。
height:400px;
height:100%;
max-height:1340px;
If you limit the height in the inspector to 400px as it is then the scroll works. Currently there's not enough content to reach that max height you have set so there is no need for the scroll to occur.
如果您将检查器中的高度限制为 400 像素，则滚动可以正常工作。目前没有足够的内容来达到您设置的最大高度，因此不需要发生滚动。
However, I think that your cloud animations are slowing the scroll down to make it "juttery". I don't have a solution to that I'm afraid. It may just be my browser (Chrome)
但是，我认为您的云动画正在减慢滚动速度以使其“抖动”。恐怕我没有解决办法。它可能只是我的浏览器（Chrome）
