添加新元素时调整子元素的大小

Make child element resize when adding new elements

本文关键字：元素 调整 新元素 添加      更新时间：2023-09-26

我有一个有多个子div 的父元素。一个是"内容"区域，将始终可见，并包含可滚动的材料部分。我的问题是我无法根据包含多少其他div 元素来正确调整大小。我显然可以手动调整它的大小，但我的问题是我有一些动态元素可以添加到父元素中，这些元素将向下推"内容"部分。

有没有办法让内容区域使用 CSS 调整自身大小？还是我必须使用 JS 实现？下面是一个基本（没有动态元素）发生的情况示例：

JSFiddle here 编辑：（更新以包含我希望它的样子）

<div id="mytest"> 
    Test
    <div id="topper">
           Other Test
    </div>
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

编辑：我的问题是我不希望"rollit"扩展父div，我希望"rollit"重新调整自己以适应。这部分是关键，因为我的代码中的"topper"部分实际上是动态添加的。简而言之，无论如何，"mytest"div 都应该保持相同的大小，topperdiv 是稍后添加的，它应该（目前不）缩小"rollit"，以便"rollit"仍然适合父div。

将此样式添加到mytest：

display: table;

将两个div添加到mytest，具有以下类：

.row1 {
  display: table-row;
  height: 0px;
}
.row2 {
  display: table-row;
}

row2将包含您要适合的内容（rollit）。 row1将包含其余内容。

因为您要在 mytest 上设置高度，所以它的行将尝试按比例扩展以适应该高度。 height: 0px导致row1仅占用其内容所需的高度。

rollit上的overflow样式可防止row2超出mytest的范围。

片段：

#mytest {
  display: table;
  height: 150px;
  border: 1px solid #000;
  background: yellow;
}
.row1 {
  display: table-row;
  height: 0px;
}
.row2 {
  display: table-row;
}
#topper {
  height: 30px; 
}
#rollit {
  height: 100%;
  width: 200px;
  overflow: auto; 
}
<div id="mytest">
  <div class="row1">
    Test
    <div id="topper">
      Other Test
    </div>
  </div>
    
  <div class="row2">
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

像这样的东西 

#mytest {
    border: 1px solid #000;
}
#topper {
    height: 30px;
}
#rollit {
    width: 50%;
    overflow: auto;
    height:200px;
}

基本上，不要为要自动扩展的元素设置height。

http://jsfiddle.net/gaby/yLa6v2qk/5/

相关文章：