gpt4 book ai didi

html - 如何将外部 div 的高度设置为始终等于特定的内部 div?

转载 作者:行者123 更新时间:2023-11-27 23:41:12 26 4
gpt4 key购买 nike

我有一个包含三个内部 div 的外部 div。

我希望最左边的内部 div 始终确定外部 div 的高度。如果其他内部 div 的内容少于 [比最左边的 div],它们将有空白空间。如果他们有更多内容 [比最左边的 div],他们会得到一个滚动条。

关于 SO 的其他一些问题询问如何将外部 div 的高度设置为 内部 div 的高度。但是,在我的例子中,我有多个内部 div,并且我不知道外部 div 的高度是否大于或小于最左侧 div 的高度。

有没有办法做到这一点,尤其是只使用 CSS?

Outer div height of particular inner div

最佳答案

一个想法是使用绝对位置让一些内容脱离流,这样它不会对高度产生任何影响,然后使用 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/57031738/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com