引导面板内的滚动视图

时间：2018-09-25 15:16:34

标签： html css twitter-bootstrap

我正在尝试在引导面板中创建滚动视图。问题是我的滚动视图是绝对的，它从面板顶部开始。因此它隐藏了面板标题的一部分。 

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}


#right {
  height:100%;
  background-color: #f1c40f;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Panel title</div>
  <div class="panel-body">
  <div class="col-sm-8" id="left">
      <p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p>
  </div>   

  <div class="col-sm-4" id="right">
      <p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p>
  </div>
  </div>
  </div>

如何使它在面板标题下启动？

4 个答案:

答案 0 :(得分：1)

如果您不想执行.panel-body position：relative，则只需更改#right顶部：42px（如下所示）。

希望这会有所帮助

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}


#right {
  height:100%;
  background-color: #f1c40f;
  text-align: center;
  position: absolute;
  top: 42px;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Panel title</div>
  <div class="panel-body">
  <div class="col-sm-8" id="left">
      <p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p>
  </div>   

  <div class="col-sm-4" id="right">
      <p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p>
  </div>
  </div>
  </div>

答案 1 :(得分：1)

您最好的选择是为右div分配一个top值：

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}

#right {
  height:100%;
  background-color: #f1c40f;
  text-align: center;
  position: absolute;
  top: 42px;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Panel title</div>
  <div class="panel-body">
  <div class="col-sm-8" id="left">
      <p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p>
  </div>   

  <div class="col-sm-4" id="right">
      <p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p>
  </div>
  </div>
  </div>

答案 2 :(得分：0)

您的黄色面板出现在面板标题上方的原因是因为.panel-body div（是#right div的父div）没有添加position: relative样式。

我已经复制了您的代码段，并添加了您缺少的一点代码。

编辑：

由于上述建议导致滚动停止工作，因此我从面板主体div中移除了position: relative，并为绝对定位的div的最高值添加了42px。现在滚动将起作用。

但是，当您使用引导程序时，我并不奇怪为什么您不只是使用引导程序将2个div并排放置。看一下利用Bootstrap的提琴：https://jsfiddle.net/sdkow4v2/ 

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}


#right {
  height:100%;
  background-color: #f1c40f;
  text-align: center;
  position: absolute;
  top: 42px;
  right: 0;
  overflow-y: scroll;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Panel title</div>
  <div class="panel-body">
  <div class="col-sm-8" id="left">
      <p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p><p>Left content</p>
  </div>   

  <div class="col-sm-4" id="right">
      <p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p><p>Right content</p>
  </div>
  </div>
  </div>

答案 3 :(得分：0)

如果绝对div超出面板主体，则您错过了一件事：

您必须使用相对位置包装父div

即

.panel-body{
position:relative;
}

绝对div要做的是相对于面板主体获取顶部和左侧坐标。如果您不使用相对于父级div（panel-body）的position：，则右面板div将采用相对于body标签的顶部和左侧坐标值。

相关问题
最新问题