时间戳

首页 > 解决方案 > 如何在css中实现flex内容的固定行和滚动行

jquery - 如何在css中实现flex内容的固定行和滚动行

问题描述

如何flex在 CSS 中为内容实现固定行和可滚动行？我想为内容实现一个滚动条。我希望第一行被固定，第二行应该滚动。在第二行内，我使用 flex 布局拆分三行

 .content{
    display:flex
    }

<!-- language: lang-html -->

    <div class="content">
      <div class="row"></div> <!-- first row fixed -->
      <div class="row"></div> <!-- second row scrolls -->
    </div>

标签： jqueryhtmlcssflexbox

解决方案

希望这可以帮助你。示例可在 [codepen][1][1] 获得：https ://codepen.io/vssadineni/pen/BGJeRN

<style>
    .content,
.row {
  display: flex;
  flex-flow: row wrap;
  flex-basis: 100%;
  position: relative;
}
.content {
  max-width: 86%;
  background-color: #cccccc80;
  margin: auto;
  align-items: flex-start;
  padding: 1em;
  overflow: auto;
  max-height: 12em;
}
.row {
  justify-content: space-between;
}
.row[data-row="absolute"] {
  position: -webkit-sticky;
  position: sticky;
  top: 1em;
  left: 1em;
  max-width: 22%;
  margin-right: 1em;
  color: blue;
}
.row[data-row="normal"] {
  position: relative;
  max-width: 76%;
  color: red;
  margin-left: 1em;
  height: 16em;
  overflow: scroll-y;
}
.row p {
  margin: 0 0 1em 0;
}
</style>


 <div class="content">
      <div class="row" data-row="absolute">
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
  </div> <!-- first row fixed -->
      <div class="row" data-row="normal">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt lorem quis turpis lobortis cursus. Mauris sodales lacinia nunc, a vestibulum augue interdum vel. Praesent facilisis ante ac dui lacinia sollicitudin. Maecenas id sem fringilla massa consectetur cursus et vitae ex. Aenean varius tempor pulvinar. Etiam cursus et augue in cursus. Donec eget purus convallis, dignissim eros et, vehicula lectus. Quisque vel lobortis quam, nec feugiat ipsum. Sed faucibus finibus diam, sed facilisis nisl scelerisque et. In diam nulla, sollicitudin vitae ullamcorper ac, blandit in magna. Pellentesque condimentum venenatis orci, quis viverra risus aliquam quis. Phasellus at sapien ut lorem faucibus tempor vel vitae tortor.</p><p>Sed sit amet mollis quam. Sed at mauris commodo, feugiat lorem vel, suscipit urna. Mauris eget quam sed nulla hendrerit commodo. Curabitur mollis mauris vel pulvinar efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vehicula gravida dui, vel facilisis lectus vehicula ac. Aliquam erat volutpat. Aenean commodo in velit non pulvinar.</p><p>Donec sed massa venenatis, semper tellus vel, venenatis dui. Sed dignissim nisi elit, eu euismod ex rhoncus ac. Aliquam erat volutpat. Praesent at leo sagittis ante hendrerit ultrices a at tortor. Fusce viverra nibh vitae commodo venenatis. Donec consequat nulla ut nunc pulvinar iaculis. Integer vehicula gravida nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tellus dui, fermentum eget tempor nec, accumsan id dolor. Mauris vulputate libero ac orci consequat faucibus. Proin quis congue velit. Fusce et dictum sapien. Cras dui erat, hendrerit vel posuere a, feugiat accumsan dolor. Aenean vestibulum enim nisl, eu posuere tellus tempor et.</p><p>Vestibulum vel volutpat lacus. Praesent rutrum orci tempor rutrum condimentum. Nunc viverra vel elit id condimentum. Suspendisse pretium, diam vel bibendum facilisis, mauris nulla cursus est, eget aliquet massa erat in tellus. In dapibus aliquam imperdiet. Donec convallis tortor in eros lacinia bibendum. Mauris mollis metus laoreet neque rhoncus, eu vestibulum odio auctor. Nunc commodo faucibus tellus, eget mollis mauris auctor quis. Sed at dignissim ipsum, in volutpat quam. Sed et sollicitudin augue, vel tempus nibh.</p><p>Curabitur at sem massa. Morbi facilisis odio et nisi consequat, sed fermentum enim laoreet. Proin suscipit nunc at ante hendrerit pharetra. Pellentesque ac consectetur ipsum. Integer mattis justo non magna aliquet, vitae consectetur leo aliquet. Mauris consequat tincidunt condimentum. Pellentesque diam risus, consequat non vehicula ut, mollis in ex. Quisque nisl est, varius eget euismod ut, cursus sit amet ipsum. Donec elementum fringilla orci, id laoreet justo ultricies vel. Nunc ut commodo nisl. Donec laoreet quam ac hendrerit posuere. Sed luctus erat vel dui molestie, in rhoncus felis convallis.</p>
  </div> <!-- second row scrolls -->
</div>

推荐阅读