如何將字段集的寬度約束爲屏幕的百分比

我有一個字段集，我想要佔用瀏覽器窗口的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

來源

2015-09-24 fadedbee

你能否包括你的標記呢？ – TylerH

你有沒有嘗試「調整大小：無;」 –

@SariRahal'resize'沒有得到廣泛的支持 – hungerstar

好，字段集都有默認最小寬度值（最小寬度：分含量;）

編輯：EHH該瀏覽器的兼容性:( 在這裏你去：http://jsfiddle.net/of4dmkmk/4/

Chrome和FF表現不同。包括在FF

老答案一個div最小寬度爲鍍鉻包裹字段集爲您#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; 
}

來源

2015-09-24 14:22:28 Remigijus

哇！我想知道這是怎麼發生的。 http://jsfiddle.net/of4dmkmk/2/好。 – rajuGT

不，這不起作用 - 請參閱https://jsfiddle.net/of4dmkmk/2 – fadedbee

@chrisdew其爲文本內容工作。如果我刪除Remigijus提到的css屬性，fieldset的大小就會增加。但我不知道它的工作方式。！ – rajuGT

你爲什麼不只是放置一個DIV中的字段集，然後設置div的寬度到25％，並設置溢流隱藏？

來源

2015-09-24 14:11:35

我已經從這種方法退步了 - 結果是一個字段集，當添加內容時，其右側（包括框）隱藏起來。 – fadedbee

如何將字段集的寬度約束爲屏幕的百分比

回答

相關問題