Контейнер высотой 100% выталкивается из окна просмотра IE путем абсолютного позиционирования - PullRequest
Новая
       3

Контейнер высотой 100% выталкивается из окна просмотра IE путем абсолютного позиционирования

0 голосов
/ 14 октября 2010

Следующее ведет себя точно так, как я ожидаю, в Firefox и Safari, но решение для Internet Explorer ускользает от меня.

Проблема : браузеры, не использующие IE, показывают, что контейнер правильно выдвинутподальше от сторон смотрового окна.IE, тем не менее, поддерживает строгую 100% высоту контейнера (предположительно на основе родительского элемента этого контейнера) и вместо этого смещает контейнер, выталкивая его из нижней части области просмотра.

<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<style>
html, body {margin:0;padding:0;height:100%;}

html {
    height:auto;
    min-height:100%;
    overflow:hidden;
    }

div#container {
    position:absolute;
    top:50px;
    right:20px;
    bottom:20px;
    width:290px;
    max-height:100%;
    #height:100%;
    }

div#one,
div#two {
    position:relative;
    height:50%;
    overflow:auto;
    }

div#one {background-color:lightgreen;}
div#two {background-color: lightblue;}
</style>
</head>
<body>
    <div id="container">
        <div id="one">top</div>
        <div id="two">bottom</div>
    </div>
</body>
</html>

Абсолютно позиционированный контейнер содержит два элемента высотой 50%.

Требования следующие:

  1. Расположение контейнера произвольно, но ононеобходимо оттолкнуть от сторон области просмотра, не полагаясь на отступы в области просмотра.
  2. При изменении размера области просмотра высота двух элементов в контейнере должна изменяться в зависимости от процентного значения (в настоящее время 50%каждый).
  3. Это должно работать как минимум в IE 7+ и Firefox 3+.
  4. Если это приводит к "О, ЧУУ!"момент для меня, вы постараетесь не злорадствовать.

Я пробовал много комбинаций атрибутов позиции и высоты для элементов HTML и BODY, но, видимо, не нашел правильного для IE.

1 Ответ

0 голосов
/ 14 октября 2010

Используется небольшой специфический (нестандартный) код IE для исправления поведения для IE7. В других браузерах ничего не меняется. 

<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<!-- saved from url=(0014)about:internet -->
<style>
html, body {margin:0;padding:0;height:100%;}

html {
    height:auto;
    min-height:100%;
    overflow:hidden;
    }

div#container {
    position:absolute;
    top:50px;
    right:20px;
    bottom:20px;
    width:290px;
    max-height:100%;
    #height:100%;
    }

div#one,
div#two {
    position:relative;
    height:50%;
    overflow:auto;
    }

div#one {background-color:lightgreen;}
div#two {background-color: lightblue;}
</style>
<!--[if IE 7]>
<style>
div#one,
div#two {
    height:expression(((this.parentElement.offsetHeight-70)/2)+'px');
}
</style>
<![endif]-->
</head>
<body>
    <div id="container">
        <div id="one">top</div>
        <div id="two">bottom</div>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...