如果文本比容器长，我怎样才能让下面的网站工作，(1) 文本不会滚出底部，以及 (2) 滚动条在浏览器的右侧而不是在容器的右侧？
(我之所以希望滚动条在浏览器的右侧是因为如果它在容器的右侧，那么当光标在灰色区域时鼠标滚轮不起作用，这是一个令人不安的用户体验。)
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
}
/* viewport lg */
@media (min-width: 1200px) {
.container {
width: 1024px;
padding: 0;
background-color: #fff;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
/* overflow-y: auto; TEXT DOESN'T EXTEND OFF BOTTOM (GOOD), BUT SCROLL BAR IS ON CONTAINER NOT ON RIGHT OF BROWSER (BAD)*/
}
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
background-color: #999;
/* overflow-y: auto; SCROLLBAR ON RIGHT OF BROWSER (GOOD) BUT TEXT EXTENDS OFF BOTTOM (BAD) */
}
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="?">Bootstrap Showcase</a>
</div>
</div>
</nav>
<div class="pagecontent">
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
</div>
</div>
</body>
</html>
附录
如果我删除 position: absolute;，它解决了这个紧迫的问题，但是如果没有足够的文本，容器不会向下延伸到底部，因为当没有灰色时它会正确地延伸背景:
最佳答案
你需要将要滚动的文本包裹在一个div中，然后在div上添加一个overflow-y: auto;。这会将滚动条添加到 div 而不是浏览器窗口。参见这个简单的 JSFiddle 示例:JSFiddle
关于html - 如何从容器底部滚动获取文本，但将滚动条保持在浏览器的最右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37167577/