Question

我有两列使用bootstrap，我正在尝试使用正确的列来overflow-y: scroll同时隐藏html, body上的滚动条

问题是，滚动条出现但已被禁用且不可滚动。

这是我的HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
    <p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="right">
        <p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p>
        </div>
    </div>
</div>

CSS

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
#left {
    background-color: #FC6E51;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  text-align: center;
  height:100%;
  overflow-y: scroll; 
}

我做错了什么？

JSFiddle https://jsfiddle.net/ensc5uy1/9/

编辑 @Chris和@Ben在JSFiddle中提供了什么工作但是当我在我的应用程序中应用它时它不起作用。我用我的整个CSS创建了一个新的JSFiddle，它可以在那里工作但不在我的应用程序中。我不知道发生了什么

https://jsfiddle.net/5td0acad/

Answer 1

您需要将其添加到CSS

.container-fluid, .row{
  height:100%;
}

JSFiddle

两列都使用100％高度，而它们占据整个宽度，因此只显示左侧，因为它占据了页面高度的100％。我假设你要并排显示它们，否则你只能看到其中一列。

Answer 2

问题是您没有将高度设置为#left和#right div的父容器。

您必须为父容器指定height: 100%，即.container-fluid和.row。但是，我在.parent容器中添加了其他类.row，因为将height: 100%添加到.row类可能会影响应用程序布局的其余部分。您可以为您的申请选择更合适的名称。

您还必须设置overflow: auto，以便滚动条仅在出现溢出时显示。

您可以在下方看到它：

＆＃13;

body, html {
  margin: 0;
  height:100%;
}
body{
  overflow: hidden;
}
#left {
	background-color: #FC6E51;
}

.container-fluid, .parent{
  height: 100%;
}

#right {
	background-color: #4FC1E9;
}

#left, #right{
  position: relative;
  float: left;
  text-align: center;
  height:100%;
  overflow-y: auto; 
}

＆＃13;

<div class="container-fluid">
			<div class="row parent">
				<div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
        <p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents END</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4" id="right">
					<p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents END</p>
				</div>
			</div>
		</div>

＆＃13;

Answer 3

像这样改变CSS：

vh代替%

的高度

#left, #right{
 text-align: center;
 height:100vh;
 overflow-y: scroll; 
}

Bootstrap可滚动列，高度为100％

3 个答案: