минимальная высота против высоты - PullRequest
Новая
       7

минимальная высота против высоты

0 голосов
/ 15 ноября 2010

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

Мой 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, похоже, просто игнорируется.

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

Ответы [ 2 ]

3 голосов
/ 15 ноября 2010

Это прекрасно работает во всех браузерах, убедитесь, что вы используете 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>
0 голосов
/ 15 ноября 2010

Единственное надежное решение этой проблемы, которое я нашел, - это использование 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>
...