Question

我正在尝试在一个引导程序列上禁用垂直滚动，并使另一列可滚动。我编写了此代码：

HTML：

<div class="h-100">
    <div class="container">
      <div class="row">
        <div class="col-3 fixed h-100 bg-secondary"></div>
        <div
          class="col-9"
        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maxime aliquid sint natus ipsa molestiae quam blanditiis nisi ab laboriosam repellendus, corporis, modi omnis, veniam praesentium doloribus officia! In iusto quam delectus vero veniam. Quasi ex similique sint pariatur culpa labore, debitis quidem eveniet, sed praesentium consectetur nemo expedita</div>
      </div>
    </div>
  </div>

CSS：

.fixed {
  position: fixed !important;
  top: 0px;
  left: 0px;
  bottom: 0px;
}

但是第二栏中的文字位于第一栏中，如何解决？

Answer 1

要禁用元素的垂直滚动，请对元素应用以下CSS：

[
{
   "name": "Joe",
   "email": "joe@bloggs.com",
   "cell": "1234567890",
   "dob": "1998-07-13",
   "study": "4"
}
]
{
   "name": "tom",
   "email": "tom@bloggs.com",
   "cell": "1234567891",
   "dob": "1998-07-16",
   "study": "9"
}

Answer 2

看看这个：

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}

.main-container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.side-panel {
  position: fixed;
  height: 100vh;
  background-color: grey;
  width: 33%;
}

.content {
  width: 100%;
  background-color: black;
  color: white;
  margin-left: 33%;
  padding: 15px;
}

@media (max-width: 540px) {
  .main-container {
    display: block;
    flex-wrap: wrap;
  }
  .side-panel {
    position: static;
    width: 100%;
    min-height: 250px;
    height: auto;
  }
  .content {
    width: 100%;
    margin-left: 0;
  }
}

<div class="main-container">
  <div class="side-panel"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

如何从html和bootstrap中的垂直滚动中禁用列？

2 个答案: