- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含三个内部 div 的外部 div。
我希望最左边的内部 div 始终确定外部 div 的高度。如果其他内部 div 的内容少于 [比最左边的 div],它们将有空白空间。如果他们有更多内容 [比最左边的 div],他们会得到一个滚动条。
关于 SO 的其他一些问题询问如何将外部 div 的高度设置为 内部 div 的高度。但是,在我的例子中,我有多个内部 div,并且我不知道外部 div 的高度是否大于或小于最左侧 div 的高度。
有没有办法做到这一点,尤其是只使用 CSS?
最佳答案
一个想法是使用绝对位置让一些内容脱离流,这样它不会对高度产生任何影响,然后使用 flexbox 作为主要布局:
.container {
display: flex;
border: 1px solid;
padding: 5px;
box-sizing: border-box;
}
.container>div {
flex: 1;
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
div.inner {
border-color:red;
}
.inner-alt {
position: relative;
overflow: auto;
}
.inner-alt>div {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
这是使用 height:0;min-height:100%
的另一个技巧
.container {
display: flex;
border: 1px solid;
padding: 5px;
box-sizing: border-box;
}
.container>div {
flex: 1;
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
div.inner {
border-color:red;
}
.inner-alt {
position: relative;
overflow:auto;
}
.inner-alt>div {
height:0;
min-height:100%;
}
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
<div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
</div>
与上面相同的想法,没有额外的包装器和使用 CSS 网格:
.container {
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:10px;
border: 1px solid;
padding: 10px;
box-sizing: border-box;
}
.container>div {
border: 1px solid;
box-sizing: border-box;
}
div.inner {
border-color:red;
}
.inner-alt {
overflow:auto;
height:0;
min-height:100%;
}
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
<div class="inner-alt">
ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
<div class="inner-alt">
eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
<div class="inner-alt">
eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
我们还可以使用 contain: size
来完成与 height:0; 相同的工作;最小高度:100%
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
border: 1px solid;
padding: 10px;
box-sizing: border-box;
}
.container>div {
border: 1px solid;
box-sizing: border-box;
}
div.inner {
border-color: red;
}
.inner-alt {
overflow: auto;
contain: size;
}
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
<div class="inner-alt">
ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
<div class="inner-alt">
eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
<div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="inner-alt">
eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
<div class="inner-alt">
ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
<div class="inner-alt">
eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
关于html - 如何将外部 div 的高度设置为始终等于特定的内部 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56413220/
根据小节 11.4.8 ECMAScript 5.1 标准: The production UnaryExpression : ~ UnaryExpression is evaluated as fo
我正在尝试构建一个“新评论”功能,向用户显示自上次访问以来的新评论数量。我构建了一个“ View ”表,其中包含主题 ID、用户 ID 和时间戳。每次用户访问该主题时更新时间戳或插入新行(如果不存在)
如标题所述,为什么: > !!1=="1" 等于 True 和 > !!2=="2" 等于: False 同样,为什么 > "1"==true 等于 true 而 > "2"==true 等于 fal
我在 Stack Overflow post 上看到了下图 但是,我对“p OR q”、“p AND q”的结果感到困惑,其中“p”等于“false”,“q”等于“unknown”。 在图中,“p O
一栏有效 whereJsonContains('VehicleApplications' ,['ModelName' => $model, 'YearID' => $year] )->
如果满足条件,我如何才能只获取特定记录? 我有代码为 "SELECT a.id, a.text, a.uid, a.time FROM story a INNER JOIN friends b
我正在尝试运行 MongoDB 查询并返回字段为空的记录(更具体地说,在 pyMongo 中为 None)。所以它必须等于 null。 我知道这不等于: {"firstName": {"$ne": N
我在 Java 中进行单元测试时遇到问题。 我把我的代码和错误放在这里。在互联网上我发现这是哈希码的问题。我需要重新创建它们,但我不知道为什么以及如何。 我的方法: public void setGr
如何在 Typescript 中实现 equals? 我尝试了几种方法,都没有奏效。 选项1: abstract class GTreeObject{ abstract equals(obj:
我查看了很多地方,大多数 arraylist 示例都使用“String”作为元素,但是很难找到使用对象的地方。 假设我正在制作一个图书 Collection ,并且我有一个作者对象: class Au
$a,$b,$c = 1,2,3; print "$a, $b, $c\n"; 返回 , , 1 那么 = (equals) 是否比元组构造具有更高的优先级 - 这样做? $a,$b,($c=1
在此代码片段中,a 和 i 分别具有什么值以及为什么? int i = 1; int a = i++; 是a == 1还是a == 2? 最佳答案 a==1。然后,i==2 如果你这样做的话,那就是a
我觉得我遗漏了一些明显的东西。这是一个简单的例子来说明我的问题。 我希望 current = 3 返回“之前”。 current = 4 应该返回“key-two”,current = 5 应该返回“
有人能告诉我为什么这会返回 true 吗?我想如果我投一些东西给例如Object 然后调用.equals,将使用 Object 的默认实现。 s1 == s2 应该返回 false。 请告诉我在哪个主
我需要检查加载到 UIImage 对象文件中的文件是否等于另一个图像,如果是,则执行一些操作。不幸的是,它不起作用。 emptyImage = UIImage(named: imageName) if
我想知道什么是正确的 Java 编程范式来覆盖类 C 对象的 equals(和 hashCode)方法,在以下情况下 (a) 有没有足够的信息来确定 C 的两个实例是否相等,或者 (b) 调用方法不应
>>> (()) == () True >>> (()) () 最佳答案 () 是一个 0 元组。 (foo) 产生 foo 的值。因此,(()) 产生一个 0 元组。 来自 the tutorial
考虑这段代码: var i = 0; >> undefined i += i + i++; >> 0 i >> 0 // why not 1? 由于增量 (++) 运算符,我希望 i 为 1。我认为
在我看来,TValue 似乎缺少一个强制方法; TValue.Equals(TValue)。 那么比较 2 个 TValue 的快速且合适的方法是什么,最好不使用 TValue.ToString(),
使用 SQL 时,在 WHERE 子句中使用 = 代替 LIKE 有什么好处吗? 如果没有任何特殊的运算符,LIKE 和 = 是相同的,对吧? 最佳答案 不同的运算符 LIKE 和 = 是不同的运算符
我是一名优秀的程序员,十分优秀!