css - 如何使 PRE 扩展到列大小而不增加新数据-6ren

css - 如何使 PRE 扩展到列大小而不增加新数据

转载作者：行者123 更新时间：2023-11-27 23:19:33

我有一张卡片 (1)，其中包含另外两张使用 Bootstrap 列的卡片(2 和 3)。卡号 2 有一些选择和其他元素，并根据屏幕改变其高度。卡号 3 有一个 pre 元素和一些按钮。我想要实现的是使两列的高度相同，每列包含一张卡片。 pre 元素将动态接收新数据，所以我希望它有滚动条以保持数据可读。我能够通过为卡片指定高度来做到这一点:

height: 10rem; overflow: auto; display: flex; flex-direction: column-reverse;

但是我需要它根据卡片 1 的大小进行扩展，如果我将高度设置为 100%，它就可以工作。所以我希望它像高度设置为 100% 时那样显示，但像设置高度时那样工作到一个特定的值。这可能吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="fas fa-exchange-alt"></i> CARD
          </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                <form>
                  <div class="form-group row">
                    <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select1">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select2" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select2">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select3" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select3">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select4" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select4">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

              </div>
            </div>
          </div>

          <div class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div class="card" style="height: 100%; overflow: auto; display: flex; flex-direction: column-reverse;">
                  <div class="card-body" id="terminal_div">
                    <pre id="terminal_pre"></pre>
                  </div>
                </div>

                <fieldset id="group_io">
                  <div class="input-group mt-2">
                    <select class="custom-select col-sm-2" id="io_select">
                      <option value="0" selected>1</option>
                      <option value="1">2</option>
                    </select>
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                      <button class="btn btn-outline-success" type="button">Send</button>
                    </div>

                    <button type="button" class="btn btn-secondary ml-2">Clear</button>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

</div>

高度设置为 100% 的 Pre(随着新数据不断扩展):

https://jsfiddle.net/Fperola/kL17ewpv/17/

Pre 高度设置为一个值(例如 10rem)(根据需要添加滚动条但不响应不同的屏幕):

https://jsfiddle.net/Fperola/kL17ewpv/16/

最佳答案

我认为纯 CSS 是不可能的，必须放入 jQuery...我做了一些事情:

分配 id card2 & card3 和一个类 ourClass 让事情变得简单
将内联样式更改为 overflow-y: scroll;显示: flex ； flex 方向:列反转；
添加了一些 jQuery 来读取 #card2 的结果并相应地设置 #card3

下面的

工作代码片段(请在整个页面中运行它以查看效果):

setInterval(function() {
  $('#terminal_pre').append("123");
  $('#terminal_pre').append("&#10;");
}, 1000);

function setRelevantHeight() {
  var newHeight = $("#card2").height();
  $('#heightHere').text($("#card2").height());
  $("#card3").height(newHeight);
  var newAdjustedHeight = newHeight - 175;
  //console.log("newAdjustedHeight:",newAdjustedHeight);
  $(".ourClass").height(newAdjustedHeight);

}

$(document).ready(function() {
  setRelevantHeight();
})

$(window).resize(function() {
  setRelevantHeight()
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fas fa-exchange-alt"></i> CARD
      </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div id='card2' class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                <form>
                  <div class="form-group row">
                    <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select1">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select2" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select2">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select3" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select3">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <form>
                  <div class="form-group row">
                    <label for="Select4" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select4">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

              </div>
            </div>
          </div>

          <div id='card3' class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div class="card ourClass" style=" overflow-y: scroll; display: flex; flex-direction: column-reverse;">
                  <div class="card-body" id="terminal_div">
                    <pre id="terminal_pre"></pre>
                  </div>
                </div>

                <fieldset id="group_io">
                  <div class="input-group mt-2">
                    <select class="custom-select col-sm-2" id="io_select">
                      <option value="0" selected>1</option>
                      <option value="1">2</option>
                    </select>
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                      <button class="btn btn-outline-success" type="button">Send</button>
                    </div>

                    <button type="button" class="btn btn-secondary ml-2">Clear</button>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
  <p id='heightHere'> this is </p>
</div>

关于css - 如何使 PRE 扩展到列大小而不增加新数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58089025/

文章推荐： html - 发送到另一个容器时删除属性元素

文章推荐： C++ 指向对象的指针作为类成员

文章推荐： C++ wchar_t * 等于对其他 wchar_t * 不区分大小写

文章推荐： css - 如何正确地将样式应用于 SVG 类？

c# - Delphi 扩展到 C#
如何将浮点 10 字节十六进制字符串(Delphi 中的扩展数据类型)转换为 C# 数据类型？例如:00 00 00 00 00 00 00 80 ff 3f 在 Delphi 1 最佳答案涉及同
c++ - PRId16 扩展到 d
我正在阅读 this page上面写着 If one of the strings has an encoding prefix and the other doesn't, the one that
r - 是否可以将 geom_ribbon 扩展到 xlimits？
我有以下代码(作为示例)，我想对其进行调整，以使功能区扩展到整个 xrange，如 geom_hline()做。功能区指示哪些值在可接受的范围内。在我的实际应用程序中，有时没有上限或下限，因此 hli
linq - 如何将 Linq 扩展到 SQL？
去年，斯科特·格思里 stated “如果您想要对执行的 SQL 进行绝对控制，您实际上可以覆盖 LINQ to SQL 使用的原始 SQL”，但我找不到描述可扩展性方法的文档。我想修改以下 LIN
java - 扩展到 fragment 或 Activity
我尝试在我的应用中创建一个抽屉导航。我有 3 个当前选项(查看、声明、报告)，当然这 3 个 Activity 已扩展到 fragment。在View 中，它有一个next 按钮，该按钮将转到另一个页
java - 将 Activity 扩展到 AppCompatActivity
很抱歉，如果我的问题被重复，但我无法(或不知道如何谷歌)找到答案。我想使用 rxlifecycle-navi 库来将 rxjava 绑定(bind)到生命周期，所以我需要扩展 NaviActivity
javascript - 如何将方法附加/扩展到 dom 元素
有这个html: aaa 做的时候: $('#hi1').sayHi(); 我想收到一条“嗨”提醒有人知道这是怎么做到的吗？最佳答案了解更多关于jQuery plugin authoring
ios - 如何使 UITextView 扩展到 UIImageVIew
我有一个 UIImageView 和一个 UITextView。当点击 UITextView 时，我需要 UITextView 在 UIImageView 上展开。我不知道该怎么做。从这里为此最
java - 为什么不能分配 I 扩展到 <类型>？
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
java - 为什么不能分配 I 扩展到 <类型>？
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
unix - 在 UNIX shell 脚本中 : What does $! 扩展到？
$的意思是什么!在 shell 或 shell 脚本中？我正在尝试理解具有以下内容的脚本。 local@usr> a=1 local@usr> echo $a 1 local@usr> echo $!
gwt - 为什么我不能添加从 SimplePanel 扩展到 RootPanel 的类？
我正在 GWT 中设计一个简单的应用程序，并且在客户端有不同的 View 。每个 View 都从 SimplePanel 扩展而来，并将根据需要添加到 RootPanel。我的第一个 View 是
azure - 从 S2 扩展到 S3 数据层似乎不可能？
我尝试在 SQL Azure 选项卡中从 S2 扩展到 S3，但 S3 似乎不可用，尽管它已被引入。另外，我还有大量可用的 DTU，即 1900 左右。是否无法扩展到 S3？我是否需要导出数据库，然后
javascript - 关于将此代码从 querySelector 扩展到 querySelectorAll 的建议
我有一个带有 JS、html 和 css 的自定义视频播放器。我的问题的关键是我没有预料到将其从一个视频扩展到两个视频，我希望重构它，以便我可以在一个页面上播放多个视频。我尝试将所有内容重写为 for
Firebase 实时数据库 - 扩展到 100.000 个并发连接以上
我当前正在开发的应用程序需要可扩展的实时通信。我们一直在研究并尝试 Firebase 实时数据库和 firestore。看来Firebase实时数据库更加成熟并且经过测试，而firestore仍处于测
kubernetes - 如何将 kubernetes daemonset 扩展到 0？
当 pod 被 daemonset 控制时，pod 会出现一些错误，状态会是 CrashLoopBackOff ，我想删除这些 Pod 但不想删除 DaemonSet。所以我想把daemonset缩
java - 将 Graphic Void 扩展到 Jframe？
我有 Jframe 表单并创建了从中绘制图形的类，为此我需要将该 void 类扩展为 jframe 表单 package grafiktest; import java.awt.Color; impo
qt - 如何让 QWidget 扩展到 QTabWidget 中的整个选项卡？
在布局和尺寸策略方面，我从来都不是太出色，所以这可能是一个简单的答案，但就是这样。当我向 QTabWIdget 添加新选项卡并将小部件设置为 QSplitter 时，拆分器将使用给定的全部空间量。但
r - 如何以规范的方式将 as.list 扩展到 S4 对象
我在将我的 S4 对象转换回列表时遇到了一些问题。例如，以下嵌套的 S4 类: setClass("nssItem", representation(value = "numeric
java - 将 JPA 扩展到 Web 服务
在阅读了 DDD 的一些页面后，我了解了存储库模式，然后在应用程序中成功使用了它(我真的很喜欢它)；然后我注意到 EntityManager 是 generic-repository-like，但是当

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何使 PRE 扩展到列大小而不增加新数据