如何从容器底部滚动文本，但保持滚动条在浏览器的最右边？ [英] How to get text from scrolling off bottom of container, yet keep scroll bar on far right of browser?
问题描述
如何让以下网站正常工作，如果文字长于容器，（1）文字不会滚动到底部，（2）滚动条在浏览器的右侧，而不是在容器的右侧？
How can I get the following site to work so that if the text is longer than the container, (1) the text does not scroll off the bottom, and (2) the scrollbar is on the right side of the browser and not on the right side of the container?
（我想要滚动条右侧的滚动条浏览器是因为如果它在容器的右侧，那么当光标在灰色区域时鼠标滚轮不工作，这是一个令人不安的用户体验。）
(The reason I want the scrollbar on the right side of the browser is because if it is on the right side of the container, then the mouse-wheel does not work when the cursor in on the gray area, which is a disconcerting user experience.)
<!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>
ADDENDUM
c $ c> position：absolute; ，它解决了这个即时问题，但是如果没有足够的文本，容器不会向下延伸到底部，因为它没有灰色背景时正确的：
ADDENDUM
If I remove position: absolute;, it fixes this immediate problem but then the container does not extend down to the bottom if there is not enough text, as it does correctly when there is no gray background:
推荐答案
从容器中移除 position：absolute 。
http://codepen.io/ruchiccio/pen/VaRXKO
编辑：全部你需要做的是给这个容器div这种风格：
height:100vh;
这篇关于如何从容器底部滚动文本，但保持滚动条在浏览器的最右边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
