высота 100% в Chrome
У меня есть проблемы со стороной div это не получит высоту к 100% в Chrome. Это работает просто великолепно в И следующие.
Я использую:
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
Почему это?
3 ответа
Это отлично подходит для меня в любом браузере:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; background-color: gray; }
</style>
</head>
<body>
<div id="div">test</div>
</body>
</html>
Не могли бы вы предоставить более подробную информацию?
Изменить
Вот обновленная версия, основанная на предоставленной информации:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
.contents { height: 100%; width: 780px; margin-left: auto;
margin-right: auto; text-align: left; }
#right { float: left; width: 217px; min-height: 100%; background:#4b805b; }
</style>
</head>
<body>
<div class="contents">
<div id="right">test</div>
</div>
</body>
</html>
По-прежнему все выглядит нормально для Chrome, Firefox и IE8
From http://doctype.com/give-two-nested-divs-100-minheight :
Дочерний элемент наследует высоту родительского контейнера, только если он указано явно. Но мин-высота не является явной спецификацией высота, поэтому вычисленная высота "авто" а не 100%.
Вы должны указать своего родителя со 100% высотой, а также ребенка, поэтому
html,body{
height: 100%;
}
#div{
min-height: 100%;
height: auto !important;
height: 100%; /*for IE*/
}
! Important перезапишет все остальные правила высоты. Постарайтесь, чтобы у вас не было проблем.