HTML字段集内容在100％高度溢出（Chrome） [英] HTML Fieldset content overflows at 100% height (Chrome)
问题描述
我在Chrome中的HTML fieldset 元素有问题。
height fieldset ，其中包含一个可滚动的 div 。一切看起来不错，直到我把一个图例在 - 当我这样做， div 溢出从 fieldset 。我也检查了Firefox，它不这样做（即完全按照我的期望）。
还有谁看到了吗？是Chrome错误吗？任何人都知道这是否有黑客？
<！DOCTYPE HTML>
< html>
< head>
< title> a< / title>
< style>
fieldset {
height：80px;
}
fieldset div {
height：100％;
overflow-y：scroll;
}
< / style>
< / head>
< body>
< fieldset>
< legend>测试< / legend>
< div>
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
< / div>
< / fieldset>
< / body>
< / html>
图例
/ code>元素，是适当地使用
h1 和样式。这对我和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>测试< / h1>
< div>
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
Foo！< br />
< / div>
< / fieldset>
< / body>
I have a problem with the HTML fieldset element in Chrome.
I want to have a fixed-height fieldset, and within it a scrollable div. Everything looks fine until I put a legend in - when I do so, the div spills out from the bottom of the fieldset. I also checked in Firefox, and it does not do this (i.e. does exactly what I would expect).
Anyone else seeing this? Is it a Chrome bug? 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>
Another solution, if you do not need to use the legend element, is to use an h1 and style appropriately. This works for me in both Chrome and 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>
这篇关于HTML字段集内容在100％高度溢出（Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
