HTML Fieldset内容在100％高度溢出（Chrome）
[英]HTML Fieldset content overflows at 100% height (Chrome)
问题描述
I have a problem with the HTML fieldset element in Chrome. 
我在Chrome中的HTML fieldset元素有问题。
I want to have a fixed-height fieldset , and within it a scrollable div . 我想有一个固定高度的fieldset ，并且其中有一个可滚动的div 。 Everything looks fine until I put a legend in - when I do so, the div spills out from the bottom of the fieldset . 在放入legend之前，一切看起来都很好-当我添加legend时， div从fieldset的底部溢出。 I also checked in Firefox, and it does not do this (ie does exactly what I would expect). 我还检查了Firefox，但它没有执行此操作（即完全按照我的期望进行了操作）。
Anyone else seeing this? 还有其他人看到吗？ Is it a Chrome bug? 这是Chrome错误吗？ Anyone know if there is a hack for this? 有人知道这是否有黑客吗？
<!DOCTYPE HTML>
<html>
<head>
<title>a</title>
<style>
fieldset {
height: 80px;
}
fieldset div {
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<div>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
</div>
</fieldset>
</body>
</html>
3 个解决方案
解决方案1
1 2014-04-10 18:51:35
I was able to get it working by adding padding-bottom to the fieldset for Chrome only. 我可以通过将padding-bottom添加到仅适用于Chrome的字段集中来使其工作。 This balances out some of the extra height %. 这样可以平衡一些额外的高度％。 It's nice in that it works (relatively consistently) even when resizing. 很好的是，即使调整大小，它也可以（相对一致）工作。
if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
$('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}
Just as a note, I found this to be an issue in at least IE8 - IE11 as well, so the fix can be applied to IE. 仅作为注释，我发现这至少在IE8-IE11中也是一个问题，因此可以将修复程序应用于IE。
解决方案2
1 已采纳 2011-05-16 15:24:53
Another solution, if you do not need to use the legend element, is to use an h1 and style appropriately. 如果不需要使用legend元素，则另一种解决方案是适当使用h1和样式。 This works for me in both Chrome and FF. 这在Chrome和FF中都对我有效。
<!DOCTYPE HTML>
<html>
<head>
<title>a</title>
<style>
fieldset {
height: 80px;
}
h1 {
margin:0;
margin-top:-1em;
font-size:1em;
background:white;
width:33px;
}
fieldset div {
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body>
<fieldset>
<h1>Test</h1>
<div>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
Foo!<br/>
</div>
</fieldset>
</body>
解决方案3
0 2011-05-16 14:34:18
I see the overflow. 我看到了溢出。
It looks as if the fieldset div has too much height applied to it. 似乎fieldset div应用了过多的高度。 Try 尝试
fieldset div {
height: 85%;
overflow-y: scroll;
}
Works for me in Chrome. 在Chrome中为我工作。
Of course, without the code for the legend, I am not sure if there are other issues. 当然，如果没有图例的代码，我不确定是否还有其他问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.