Проблема с высотой в процентах в HTML

#html #css

#HTML #css

Вопрос:

При отображении следующего параметр высоты изображения (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-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>
  

Если мы удалим «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-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>
  

Я пытался использовать YUI 3 api для сброса CSS. Хотя это удаляет все отступы браузеров по умолчанию, это не решит мою проблему. Доступно ли какое-либо обходное решение?
Спасибо.

Ответ №1:

Добавление следующего CSS в мой файл CSS сделало свое дело.

 html, body {
height: 100%;
margin: 0;
padding: 0;
}
  

Спасибо мне: D