如何在父div

Question

我的例子在这里：http://jsfiddle.net/brxpv/6/

<div id="window">
  <div id="parent">
    <fieldset id="fs1">
      <legend>
        fieldset 1    
      </legend>
        content...
    </fieldset>

    ... variable number of field sets ...

    <fieldset id="fsN">
      <legend>
        fieldset N 
      </legend>
        content...
    </fieldset>
  </div>
</div>

CSS：

#window {
    width: 600px;
    height: 600px;
    display: table;
    background: yellow;
}
#parent {
  background: orange;  
  width: 75%;
  height: 65%;
}

input {
  display: block;
}

fieldset {
  overflow-y: scroll;
}

我希望所有的fieldset都适合橙色的父div，高度相同，无论它们的内容有多么不同。如果对于可变数量的字段集不可能没有太大的困难 - 我是否至少可以使用固定数量的字段集进行操作？

例如，如果有4个字段集，我希望每个字段集占用父节点的四分之一。我不希望父div可滚动，但字段集本身可以滚动。

欢迎任何想法

Answer 1

使用flex模型

添加：

#parent {
  display: flex;
  flex-direction: column;
}

fieldset {
  flex: 0px 1 1;
}

段

#window {
    width: 600px;
    height: 600px;
    display: table;
    background: yellow;
}
#parent {
  background: orange;  
  width: 75%;
  height: 65%;
  display: flex;
  flex-direction: column;
}

input {
  display: block;
}

fieldset {
  flex: 0px 1 1;
  overflow-y: scroll;
}

<div id="window">
  <div id="parent">
    <fieldset id="fs1">
      <legend>
        fieldset 1    
      </legend>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
    </fieldset>
    <fieldset id="fs2">
      <legend>
        fieldset 2    
      </legend>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
    </fieldset>
    <fieldset id="fs3">
      <legend>
        fieldset 3    
      </legend>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
    </fieldset>
    <fieldset id="fs4">
      <legend>
        fieldset 4    
      </legend>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
    </fieldset>
  </div>
</div>

Answer 2

根据您的具体情况，我建议您将overflow-y: scroll;添加到#parent div中，如下所示：

#parent {
    background: blue;
    width: 75%;
    height: 65%;
    overflow-y: scroll;
}