Question

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

有没有办法让内容区域使用CSS调整大小？或者我必须使用JS实现吗？这是一个基本的（没有动态元素）示例：

JSFiddle here Edit: (updated to include what I want it to look like)

<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应该保持相同的大小，无论是topper div是稍后添加的，应该（当前不会）缩小“rollit”，以便“rollit”仍然适合父div。

Answer 1

像这样的东西

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

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

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

Answer 2

将此样式添加到mytest：

display: table;

将两个div添加到mytest，其中包含以下类：

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

.row2 {
  display: table-row;
}

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

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

overflow上的rollit样式会阻止row2超出mytest的范围。

<强>段：

＆＃13;

#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; 
}

＆＃13;

<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>

＆＃13;

添加新元素时，使子元素调整大小

2 个答案: