Question

我目前有点亏。我有一个在其图例中有一个选择框的字段集，用于动态更新我的字段集中的内容，这很好。出于布局目的，字段集固定在200px的高度。

我遇到的问题是在内容溢出的情况下向字段集添加滚动条。我不能在字段集本身上使用overflow: auto，因为这会导致legend标记也滚动。其他一些答案建议使用内容包装器div添加滚动条，我已经完成了。

然而，我仍然不是我想要的地方。我需要为包装器height指定div属性，以便发生溢出。将其设置为100％会导致文本仍在框外溢出（尽管没有溢出设置那么多）。将它设置为92％几乎就是我想要的但是 92％是任意选择的，因此感觉不对（加上我稍微关注跨浏览器的兼容性）

CSS：

* {
  font: 12pt Verdana;
}

fieldset.metrics {
  height: 200px;
}

div.metrics-wrapper {
  width: 100%;
  height: 92%;
  overflow: auto;
}

HTML：

<fieldset class='metrics'>
  <legend>
    Fieldset Title, with a
    <select>
      <option selected='selected'>select box</option>
    </select>
  </legend>
  <div class='metrics-wrapper'>
    <p>
      Content goes here
    </p>
  </div>
</fieldset>

Answer 1

metrics-wrapper仍在溢出metrics 添加overflow: hidden修复了它

fieldset.metrics {
  height: 200px;
  overflow: hidden;
}

css - div溢出在fieldset parent之外

1 个答案: