时间戳

首页 > 解决方案 > CSS : 只有一个 div 可滚动

html - CSS : 只有一个 div 可滚动

问题描述

我试图让只有一个 div 可滚动，但我不知道该怎么做。

我希望 h2 和 c （黑色和蓝色）保持原样，只有 d （粉色）是可滚动的。

现在，整行都是可滚动的。

.a {
   background-color:red;
   width: calc(100vw - 3rem); 
   overflow:scroll;
}

.b {
  background-color:green;
  display: inline-flex;

  height:3rem;
}

.c {
  background-color:blue;
  display: inline-flex;
  width:3rem;
  height:3rem;
}

.d {
  background-color:pink;
  display: inline-flex;
  width:133rem;
  height:3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
}
<div class='a'>
  <div class='b'>
    <h2></h2>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

标签： htmlcssscroll

解决方案

用于position:fixed;h2 和 for .cuseposition:fixed;left:4.1rem;因为你的 h2 宽度是 4.1rem 所以使用 left:4.1rem

.a {
   background-color:red;
   width: calc(100vw - 3rem); 
   overflow:scroll;
}

.b {
  background-color:green;
  display: inline-flex;

  height:3rem;
}

.c {
  background-color:blue;
  display: inline-flex;
  width:3rem;
  height:3rem;  
  position:fixed;
  left:4.1rem;
}

.d {
  background-color:pink;
  display: inline-flex;
  width:133rem;
  height:3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
  position:fixed;
  left:0rem;
}
<div class='a'>
  <div class='b'>
    <h2></h2>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

推荐阅读