HTML中的高度百分比问题 [英] Height in percentage problem in HTML
问题描述
渲染以下内容时，不考虑image（img）的高度参数。但是，如果我按照％改变宽度（例如80％），则调整大小并保持纵横比不变。如果我提到px的高度，它就可以工作。问题只出现在所有浏览器中的高度。
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // EN
http ：//www.w3.org/TR/html4/loose.dtd>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1>
< title>在此插入标题< / title>
< / head>
< body>
< img src =image.jpgalt =图片border =0height =15％width =100％/>
< / body>
< / html>
如果我们删除 http://www.w3.org/TR/html4/loose.dtd 来自doctype，如下所示，％适用于高度，但任何填充图像不会在IE中被考虑，但在其他浏览器中可以正常工作。
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // EN>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1>
< title>在此插入标题< / title>
< / head>
< body>
< img src =image.jpgalt =图片border =0height =15％width =100％/>
< / body>
< / html>
我曾尝试使用YUI 3 API for CSS Reset。虽然它删除了浏览器的所有默认填充，但它不会解决我的问题。任何解决方法可用？
Thanks。
html，body {
height：100％;
保证金：0;
padding：0;
}
感谢我：D
When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ? Thanks.
Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D
这篇关于HTML中的高度百分比问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
