时间戳

首页 > 解决方案 > Bootstrap 布局可滚动 div

html - Bootstrap 布局可滚动 div

问题描述

我做了一个小提琴来展示我尝试过的东西，我想要一个没有滚动条的页面，并且当它们溢出时让 col left 和 col right div 得到一个滚动条。

有人可以告诉我我错过了什么吗？或者，如果您知道使用引导程序的更清洁的解决方案，请告诉我。

当小提琴到期时，我也将 html 粘贴到此处以供将来参考。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>

  <body>


<div class="container-fluid" id="my-container">
  <div class="row" id="my-full-row">


  <div class="" id="my-menu-col">
    M
  </div>

  <div class="col">
    <div class="row" id="my-title-row">
      Title row
    </div>
    <div class="row" id="my-row">
      <div class="col-sm-2" id="my-col-left">
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>
        col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>col left<br/>        
      </div>
      <div class="col-sm-10" id="my-col-right">
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
        col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>col right<br/>
      </div>
    </div>
  </div>
  </div>
</div>

和CSS

html, body {
  height: 100%;
  margin: 0;
}
.row {

    margin: 0px;
}
.col {

    padding: 0px;
}

#my-container {
  height: 100%;
  padding: 0px;
}

#my-full-row {
    height: 100%;
}

#my-menu-col {
  height: 100%;
  width: 50px; 
  background-color: purple;
}

#my-title-row {
  background-color: red;
  height: 50px;
}

#my-row {
  background-color: blue;
  height: 100%;
}

#my-col-left {
  background-color: green;
  overflow-y: scroll;
}

#my-col-right {
  background-color: yellow;
  overflow-y: scroll;
}


#u { background-color: #337ab7; }

标签： htmlcssbootstrap-4

解决方案

你有很多重复的 CSS，所以我建议你清理一下。如果我了解您想要什么，当视口足够高以容纳内容时，删除height: 100%;from会阻止它滚动。#my-row

我也添加了这个：

#my-col-left, #my-col-right {
  height: 100%;
}

推荐阅读