Question

我有一个字段集，我想占用浏览器窗口的25％。

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

当fieldset为空时，它正确占据窗口宽度的25％。

只要添加了一些广泛的内容，字段集就会扩展到其内容的大小，而不是保持在25％。

如果字段集占据浏览器宽度的25％，即使它有内容，我怎么能这样做？

更新：@rajuGT写了一个小提琴，说明了这个问题：https://jsfiddle.net/of4dmkmk/2

Answer 1

嗯，fieldset有默认的最小宽度值（min-width：min-content;）

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

Chrome和ff的行为有所不同。包括铬的最小宽度在div中为ff

包裹fieldset 老答案。对于你的#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;
}

Answer 2

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

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

2 个答案: