如何将字段集的宽度限制为屏幕的百分比

Question

我有一个字段集，我想占用浏览器的 25% window。

html, body {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  height: 100%;
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

fieldset {
  box-sizing: border-box;
  margin: 0;
}

fieldset#rx {
  width: 25%;
  max-width: 25%;
  float:left;
  height:100%;
  overflow-y: scroll;
  overflow-x: scroll;
}

虽然字段集为空，但它正确地占据了 window 宽度的 25%。

一旦添加了一些宽内容，字段集就会扩展到其内容的大小，而不是停留在 25%。

如何使字段集占据浏览器宽度的 25%，即使它有内容？

更新：@rajuGT 写了一篇 fiddle 说明了这个问题：https://jsfiddle.net/of4dmkmk/2

Answer 1

为什么不直接将字段集放在 DIV 中，然后将 div 的宽度设置为 25%，并将溢出设置为隐藏？

Answer 2

嗯，字段集有默认的最小宽度值（最小宽度：最小内容；）

编辑：嗯，浏览器兼容性:( 给你：http://jsfiddle.net/of4dmkmk/4/

Chrome 和 ff 的行为不同。包括 chrome 的最小宽度将字段集包装在 div 中 for ff

旧答案。对于你的#rx 也使用这个：

fieldset#rx {
  width: 25%;
  max-width: 25%;
  min-width: 25%; // I have added this
  float:left;
  height:100%;
  overflow-y: scroll;
  overflow-x: scroll;
}

如何将字段集的宽度限制为屏幕的百分比

How to constrain a fieldset's width to a percentage of the screen

html

css

fieldset