javascript - 强制 div 溢出而不是调整大小-6ren

javascript - 强制 div 溢出而不是调整大小

转载作者：行者123 更新时间：2023-12-02 21:18:02

25

4

我正在努力解决使两列具有相同高度的问题。

当文本不够长时，两列仍然具有相同的高度。但除此之外，<div>自动调整自身大小，使它们具有不同的高度。

我尝试过使用溢出自动，但它不起作用。

这是我的作品。 https://jsfiddle.net/kcaxy5Lh/1/

最佳答案

bootstrap 建立高度的方式很奇怪，他们在 .row 类上有 flex-wrap:wrap ，可以防止溢出的发生。

我们需要删除它并将布局更改为 flex-direction:column 然后向下传播高度。

.info-tab {
  color: #BBB;
}

.comment {
  text-align: right;
}

.btn:focus {
  outline: none;
}


/* Comment section */

.comment-wrapper .media-list .media {
  border-bottom: 1px dashed #efefef;
  margin-bottom: 25px;
}

.user_name {
  font-size: 14px;
  font-weight: bold;
}

.comments-list .media {
  border-bottom: 1px dotted #ccc;
}

.title {
  font-size: 14px;
  font-weight: bold;
}

.komen {
  font-size: 14px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* NEW */

#myTabContent,
#profile {
  height: 100%;
}

#profile>div {
  flex-wrap: nowrap;
  flex-direction: column;
  height: 100%;
}

#infoTab>div {
  overflow: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="bg-dark">
  <div class="container-fluid bg-dark">

    <div class="row px-3">
      <div class="col-xs-12 col-md-8 mt-5 embed-responsive embed-responsive-16by9 h-100" id="player">
        <iframe src="https://www.youtube.com/embed/2lAe1cqCOXo&t" width="640" height="480"></iframe>
      </div>
      <div class="col-xs-6 col-md-4 mt-5" id="infoTab">
        <div class="h-100 ml-2" style="border: 1px solid #555;">
          <div class="mx-3 h-100">
            <!-- Navication episode/comments -->
            <ul class="nav nav-tabs nav-fill py-3" id="myTab" role="tablist">
              <li class="nav-item text-right mx-2">
                <a class="info-tab btn comment" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="comment" aria-selected="false">Comments</a>
              </li>
            </ul>
            <br>
            <!-- Navication Content -->
            <div class="tab-content mx-1 container overflow-auto" id="myTabContent">
              <div class="tab-pane fade show active text-white f-right overflow-auto container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <!-- COMMENTs | https://bootsnipp.com/snippets/M5obX -->
                <div class="row py-1 overflow-auto">

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                </div>
                <!-- END COMMENT -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

关于javascript - 强制 div 溢出而不是调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60917082/

25

4

0

文章推荐： javascript - 在 npm run build 之前检查 jshint 错误

文章推荐： express - socket.rooms 返回空数组

文章推荐： CSS 在对 Angular 线上创建一个盒子阴影

文章推荐： javascript - Firebase 函数 promise 未定义的类型错误

.htaccess - 强制 https，强制到子文件夹，强制 www，不要破坏站点
我一直很难编辑我的 .htaccess 文件来一起做这三件事。我已经能够分别获得每个部分，但我只是不明白逻辑流程如何使它们全部工作。这是我能够使用 bluehost support 上的演示进行整合
vba - 强制"is"以保存并另存为无宏工作簿
我制作的宏将模板工作簿保存为两个单独的文件。每个测试保存一个(位置 1、2、3 或 4)，然后在另一个宏中使用每个测试的数据。第二个是保留用于备份的原始数据文件。现在的问题是每次我在每个位置运行测试并
types - 包括模块、强制
我正在写一篇关于如何使用 OCaml 的模块系统而不是 Java 的 OO 系统(一个有趣的视角)的博客文章。我遇到了一些我不理解的关于强制的事情。下面是一个基本模块和两个包含它的模块: module
c - 强制 if 语句只执行一次
我有一段将被执行多次(5,000+)的代码，以及一个仅在第一次为真的 if 语句。我曾想过使用“FIRST”变量并每次都进行比较，但每次都检查它似乎是一种浪费，即使我知道它不需要。 bool FIRS
强制 P4CONFIG 未设置？
首先，我是 Perforce 的新手，我主要通过其文档进行学习。因此，我们即将从 CVS 迁移到 Perforce，我最近学到了一个避免更改每个工作区的 P4CLIENT 的好方法，即在工作区根目录
java - 强制 FileNotFoundException
我正在为一段代码编写测试，其中包含我试图涵盖的 IOException 捕获。 try/catch 看起来像这样: try { oos = new ObjectOutputStream(new
javascript - 强制 $.each() 循环等待动画完成后再继续
我正在尝试在新闻项目滚动之间添加延迟。我知道 $.each() 通过不等待动画完成来完成其工作，但我想知道如何制作它，以便一次向上滚动一个项目并等到最后一个动画完成后再继续在循环中。 $(functi
c# - 强制/要求方法的排序列表参数
假设已经编写了一个方法，需要一个排序列表作为其输入之一。当然这将在代码中进行注释和记录，param 将被命名为“sortedList”，但如果有人忘记，则会出现错误。有没有办法强制输入必须排序？我正
Apache 强制 SSL
我正在尝试将传入请求重定向到 https://www.domain.com/和所有 https://www.domain.com/ {所有页面}并且没有什么麻烦。我试过的方法: 添加此行:Redire
python - 强制 raw_input
我将如何实现以下内容: title_selection = raw_input("Please type in the number of your title and press Enter.\n%
javascript - 在浏览器中自动完成 ="off"强制
我有一个登录表单，我需要强制关闭自动完成功能。我试过了 jquery: $('#login').attr("autocomplete", "off"); HTML: Javascript:docume
Git 强制 merge
我想知道我应该怎么做才能强制从 dev 分支 merge 到我的 master 分支？使用“git merge dev”会导致很多冲突。但是，我不想单独处理它们。相反，我只是想使用我的 dev 分支中
c# - 强制 Nuget 包使用特定版本的子依赖项？
当安装 Hl7.Fhir.DSTU2 和 Hl7.Fhir.R4 这两个 Nuget 包时，我们得到如下信息: DSTU2 包似乎在使用 Hl7.Fhir.Support.Poco 版本 3.4.0
reactjs - 强制 react 功能组件触发重新渲染
我正在尝试让一个功能组件在 testFn 执行时强制重新渲染。我想使用状态来做到这一点(如果有更好的方法请说出来)，这似乎成功地强制重新渲染但只有两次，然后什么都没有。我构建了一个简单的演示来模拟这
g++ - 强制 g++ 为未使用的函数生成代码
默认情况下，g++ 似乎会省略未使用的类内定义方法的代码。示例 from my previous question : struct Foo { void bar() {} void baz(
html - 强制 div 高度以适应透视内容
我正在尝试使用 here 中介绍的技术使我的网站背景以比内容慢的速度滚动。我不希望背景固定，只希望更慢。这是 HTML 的样子: .parallax { perspective: 1px;
dart - 强制 ListView 缩小以包含子项
我能找到的最相似的问题是 'how to create a row of scrollable text boxes or widgets in flutter inside a ListView?'
javascript - 强制(修复)导入完全在一行中
我有以下 eslint 配置: "object-curly-newline": ["error", { "ImportDeclaration": "never",
tinymce - 强制 TinyMCE 去除数据属性
我正在使用 TinyMCE 插件并将 valid_elements 选项设置为: "a[href|target:_blank],strong/b,em/i,br,p,ul,ol,li" 即使没有列出数
强制 : wanted to Multiline description
您好，我想使用以下命令放置多行描述 p4 --field Description="MY CLN Header \\n my CLN complete description in two -thre

首页

博学

6Ren·AI

商城

javascript - 强制 div 溢出而不是调整大小