Css 未知子级高度时自动溢出_Css

Css 未知子级高度时自动溢出

css

Css 未知子级高度时自动溢出,css,Css,我有一个元素（我知道它的宽度和高度，我不能去掉高度），里面有一些元素。我在代码片段中对其进行了简化，因此我只有一个标题（长度未知）和一个列表。我需要列表（只有列表，而不是整个容器）是overflow:auto，但我无法理解它，因为我不知道它的高度，也无法使用flexbox（IE9+：/）我想避免使用JavaScript来实现这一点（我可以用JavaScript实现，但我真的不想要FOUC） div{ 利润率：20px；填充：15px；边框：1px实心；宽度：200px；高度：400

我有一个元素（我知道它的宽度和高度，我不能去掉高度），里面有一些元素。我在代码片段中对其进行了简化，因此我只有一个标题（长度未知）和一个列表。我需要列表（只有列表，而不是整个容器）是

overflow:auto

，但我无法理解它，因为我不知道它的高度，也无法使用flexbox（IE9+：/）

我想避免使用JavaScript来实现这一点（我可以用JavaScript实现，但我真的不想要FOUC）

div{
利润率：20px；
填充：15px；
边框：1px实心；
宽度：200px；
高度：400px；
}
h1{
边际上限：0；
边框：1px红色虚线；
}
保险商实验室{
保证金：0；
填充：0；
溢出：自动；
}
李{
显示：块；
填充：5px0；
边框顶部：1px实心；
}


我的长标题，可以在多行

单子
元素的
那可以
久久
那应该
溢出自动
布拉
布拉
布拉
布拉
布拉

有几种方法可以做到这一点

首先，只需移除

div

上的

height

道具即可

如果你不想这样做。。您可以选择剪切

（溢出：隐藏）

或滚动

溢出：滚动列表

即，您的div样式可以是：
div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
  overflow: scroll; /* or hidden */
}

或者只是
div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
}

编辑：如果您不希望整个容器溢出

（如评论中所述），只需将

最大高度

添加到

ul

您的ul样式将类似于：

ul {
  margin: 0;
  padding: 0;
  max-height: 100px; /*or anything you think appropriate */
  overflow: auto;
}

css的其余部分可以与OP中的相同。

有两种方法可以做到这一点

首先，只需移除

div

上的

height

道具即可

如果你不想这样做。。您可以选择剪切

（溢出：隐藏）

或滚动

溢出：滚动列表

即，您的div样式可以是：
div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
  overflow: scroll; /* or hidden */
}

或者只是
div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
}

编辑：如果您不希望整个容器溢出

（如评论中所述），只需将

最大高度

添加到

ul

您的ul样式将类似于：

ul {
  margin: 0;
  padding: 0;
  max-height: 100px; /*or anything you think appropriate */
  overflow: auto;
}

剩下的css可以和OP中的一样。

只需添加overflow-y:auto；到您的容器元素

.wrapper{
利润率：20px；
填充：15px；
边框：1px实心；
宽度：200px；
高度：自动；
显示：内联块；
}
h1{
边际上限：0；
边框：1px红色虚线；
浮动：左；
}
.集装箱{
溢出y：自动；
高度：300px；
宽度：100%；
浮动：左；
}
保险商实验室{
保证金：0；
填充：0；
溢出：自动；
}
李{
显示：块；
填充：5px0；
边框顶部：1px实心；
断字：断字；
}


我的长标题，可以在多行

单子
元素的
那可以
久久
那应该
溢出自动
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
布拉
布拉
布拉
布拉

只需添加overflow-y:auto；到您的容器元素

.wrapper{
利润率：20px；
填充：15px；
边框：1px实心；
宽度：200px；
高度：自动；
显示：内联块；
}
h1{
边际上限：0；
边框：1px红色虚线；
浮动：左；
}
.集装箱{
溢出y：自动；
高度：300px；
宽度：100%；
浮动：左；
}
保险商实验室{
保证金：0；
填充：0；
溢出：自动；
}
李{
显示：块；
填充：5px0；
边框顶部：1px实心；
断字：断字；
}


我的长标题，可以在多行

单子
元素的
那可以
久久
那应该
溢出自动
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
布拉
布拉
布拉
布拉

如果没有JavaScript之类的东西，就无法使两者的高度都是动态的

要溢出，它需要一个引用。例如，为什么列表会溢出而不是标题

您可以将列表位置设置为绝对，但是您需要顶部和底部的坐标，因为在CSS中，您无法从其他元素（标题）获取该坐标

如果没有像flex这样的东西，我想你的另一个选择是JS

您可以在可见性隐藏的情况下呈现标题和列表（而不是显示块，因此可以计算它们的尺寸），并在应用JS后将其删除，以获得最小的FLOC效果。

如果没有JavaScript之类的东西，您无法使两者的高度都是动态的

要溢出，它需要一个引用。例如，为什么列表会溢出而不是标题

您可以将列表位置设置为绝对，但是您需要顶部和底部的坐标，因为在CSS中，您无法从其他元素（标题）获取该坐标

如果没有像flex这样的东西，我想你的另一个选择是JS

您可以在可见性隐藏的情况下呈现标题和列表（而不是显示块，因此可以计算它们的尺寸），并在应用JS后删除该标题和列表，以获得最小的FLOC效果。

如果无法使用flexbox，请使用CSS表：

设置桌子的高度
将标题单元格设置为
```
height:0
```
，使其仅与其内容所需的高度相同
将
```
ul
```
包装在表格行中，这将占用标题留下的剩余空间
将
```
ul
```
从流动中取出（以避免循环定义），并使其具有与包装相同的大小

#容器{
显示：表格；
利润率：20px；
填充：15px；
边框：1px实心；
宽度：200px；
高度：400px；
}
#容器>h1{
显示：表格单元格；
身高：0；
边际-