Question

我有一个元素（我知道宽度和高度，我无法移除高度），里面有一些元素。我已将其简化为片段，因此我只有一个标题（长度未知）和列表。我需要列表（只有列表，而不是整个容器）overflow: auto但我无法弄清楚，因为我不知道它的高度，我不能使用flexbox （IE9 +：/）。

我想避免使用JavaScript（我可以在JavaScript中使用它，但我真的不想要FOUC）。

＆＃13;

div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
}

h1 {
  margin-top: 0;
  border: 1px dashed red;
}

ul {
  margin: 0;
  padding: 0;
  overflow: auto;
}

li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
}

＆＃13;

<div>
  <h1 contenteditable>
    My long title that can be on multiple lines
  </h1>
  <ul>
    <li>a list</li>
    <li>of element</li>
    <li>that can</li>
    <li>be long</li>
    <li>that should</li>
    <li>overflow auto</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
  </ul>
</div>

＆＃13;

Answer 1

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

首先，只需移除height上的div道具。

如果您不想这样做..您可以选择剪切(overflow:hidden)或滚动overflow:scroll list

即你的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;
}

编辑：如果您不希望整个容器overflow（如评论中所述），只需将max-hight添加到ul

你的ul造型会是这样的：

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

其余的css可以与OP相同。

Answer 2

只需添加overflow-y：auto;到您的容器元素

.wrapper {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: auto;
  display: inline-block;
}

h1 {
  margin-top: 0;
  border: 1px dashed red;
  float: left;
}
.container {
  overflow-y: auto;
  height: 300px;
  width: 100%;
  float: left;
}
ul {
  margin: 0;
  padding: 0;
  overflow: auto;
}

li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
  word-break: break-word;
}

<div class="wrapper">
  <h1 contenteditable>
    My long title that can be on multiple lines
  </h1>
  <div class="container">
    <ul>
      <li>a list</li>
      <li>of element</li>
      <li>that can</li>
      <li>be long</li>
      <li>that should</li>
      <li>overflow auto</li>
      <li>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
    </ul>
  <div>
</div>

Answer 3

如果没有像JavaScript这样的东西，你就无法使这两者都具有动态的高度。

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

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

没有像flex这样的东西，你认为其他选择就是JS。

您可以使用隐藏的可见性渲染标题和列表（不显示块，因此可以计算其维数），并在应用JS以获得最小FLOC效果后删除它。

Answer 4

如果您不能使用flexbox，请使用CSS表：

设置表格的高度
将pandas.read_csv设置为标题单元格，使其仅与其内容所需的一样高。
将height: 0包裹在一个表格行中，这将占用标题留下的剩余空格。
取ul流出（以避免循环定义）并使其与包装器具有相同的大小。

＆＃13;

ul

＆＃13;

#container {
  display: table;
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
}
#container > h1 {
  display: table-cell;
  height: 0;
  margin-top: 0;
  border: 1px dashed red;
}
#container > div {
  display: table-row;
  position: relative;
}
#container ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
}

＆＃13;

Answer 5

这是我现在的JS解决方案，如果可能的话，我想在CSS中使用它，但同时它正在工作：

const height = container.clientHeight - list.offsetTop
list.style.height = height + 'px'

未知儿童身高

5 个答案: