min-height Vs height

В настоящее время я пытаюсь получить DIV для увеличения до 100% от высоты браузера. Я знаю, что это часто задаваемый вопрос и поэтому читал бесчисленные форумы, чтобы найти ответ, но еще не нашел что-то, что будет работать во всех браузерах.min-height Vs height

Мой файл CSS выглядит следующим образом:

html{height:100%;} 

body { 
background: #ffffff; 
font-size: 0.8em; 
line-height: 1.7; 
color: #09123e; 
height:100%; 
} 

#wrapper { 
background: #ffffff url(../images/assets/wrapper.bg.gif) repeat-y center center; 
margin: 0 auto; 
height:100%; 
}

Это делает, как ожидается, во всех браузерах, кроме поздних версий Internet Explorer, в первую очередь IE7 и IE8. Я обнаружил, что если я использую min-height вместо высоты на #wrapper, тогда я получаю желаемый результат в проблемных браузерах, но это тогда помешает рендерингу во всем остальном. Я попытался использовать условную таблицу стилей, но указанный стиль #wrapper просто кажется проигнорированным.

Любая помощь была бы принята с благодарностью.

источник

2010-11-15 James

Вы используете css reset для сброса всех прокладок/полей? –

Пожалуйста, измените его на минимальную высоту, а затем свяжите нас или скопируйте. Он не будет работать в IE6 и ниже, но должен в другом месте. Убедитесь, что у вас есть doctype. –

Единственное надежное решение этой проблемы, которое я нашел, - использовать javascript/jquery для ручного изменения высоты. То есть, если у посетителя включен javascript. У меня есть сайт, который имеет цветную панель меню и белую область содержимого. Оба являются div, а один - float-right, а другой float-left. Область содержимого почти всегда больше, чем в боковой панели меню, поэтому для создания цветной боковой панели до тех пор, пока я использую этот небольшой фрагмент jQuery.

<script language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      var p = $("#pageContent").height(); 
      var m = $("#menuContent").height(); 
      if (m < p) $("#menuContent").height(p); 
     }); 
    --> 
</script>

источник

2010-11-15 17:25:31 Dutchie432

Почему проголосовали? Это кросс-браузерное решение, которое решило бы проблему OP. – Dutchie432

Это прекрасно работает во всех браузерах, убедитесь, что вы используете doctype!

<!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> 
<style type="text/css"> 
* {margin: 0px; padding: 0px;} //Reset all margins, use some css reset stylesheet instead... 
html {height: 100%;} 
body {height: 100%;} 
#wrapper { 
margin: 0 auto; 
height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"></div> 
</body> 
</html>

источник

2010-11-15 17:25:40

min-height Vs height

ответ

Смежные вопросы