如何使 div 相对于 textarea 高度滚动？答案

【问题标题】：How to make a div scroll with respect to a textarea height?如何使 div 相对于 textarea 高度滚动？
【发布时间】：2021-07-01 22:09:41
【问题描述】：

我正在尝试为我的 Angular 项目制作一个迷你代码编辑器。这里我有一个textarea，旁边是一个div，显示行号。见下图：

正如您在第 23 行之后看到的那样，div 已下降到页脚下方，而 textarea 未调整大小（在 CSS 中将 Textarea 调整大小设置为 false）。我想要的是表现得像一个普通的代码编辑器，如果textarea 溢出，那么相应的 div 将滚动（但行号 div 中没有滚动条）。

有可能实现吗？请帮帮我。

请参阅此url 以获取实时示例。

【问题讨论】：

你的页脚是display: block 或position: absolute 还是什么？
@Techuila 这是display: block
我所看到的只是您提供的链接中的一个空白框
在上面给出的 url 中？

标签： html css user-interface responsive-design textarea

【解决方案1】：

我制作了一个示例代码，将页脚粘贴在底部，并使主 div 可滚动。

我基于您提供的给定网址。我刚刚添加了一个示例页脚，供您了解如何实现它。

app.component.html

<div class="app-container">
  <div class="coding_container" style="flex-grow: 1;">
    <div>
      <div class="code-row">
        <div class="column-1">
          <ul>
            <li *ngFor="let i of lineNumber">{{i}}</li>
          </ul>
        </div>
        <div class="column-2">
          <textarea [(ngModel)]="code" (input)="countLine()"></textarea>
        </div>
      </div>
    </div>
  </div>

  <div style="min-height: 80px; background-color: blue;">
    FOOTER
  </div>
</div>

styles.css

html, body, my-app {
  height: 100%;
  margin: 0;
}

my-app {
  display: block;
  width: 100%;
}

.app-container {
  height: 100%;
  display: flex; 
  flex-direction: column;
}

.coding_container {
  padding-bottom: 60px;
  overflow-y: auto;
}

最后将overflow-y: hidden 添加到您的文本区域

app.components.css

textarea {
  resize: none !important;
  padding: 10px;
  height: 100%;
  width: 100%;
  font-family: consolas;
  font-weight: 600;
  letter-spacing: 2px;
  overflow-y: hidden;  // add this
  /* border: none; */
}

【讨论】：