Сделайте так, чтобы div и child div расширялись как минимум на всю высоту окна браузера - PullRequest
Новая
       7

Сделайте так, чтобы div и child div расширялись как минимум на всю высоту окна браузера

7 голосов
/ 23 января 2012

Мне нужно иметь изображения, которые простираются вдоль левой и правой сторон моего основного тела div (фактически для своего рода эффекта тени-тени под div).

Это было бы просто, если бы не тот факт, что я хочу, чтобы этот div был расширяемым , и мне нужно, чтобы он работал в IE7 и IE8, и я хочу, чтобы он расширялсяпо крайней мере в нижней части страницы.

Я пытался использовать полифиллы для запуска магии CSS3, но они тоже не работали (я безуспешно пробовал PIE и некоторые фильтры).

Я чувствую, что перепробовал все ... что привело меня сюда!Это насколько я получил только через CSS / html, я чувствую, что должен иметь возможность заставить его работать, но пока без сигар: 

<div class="left-image">
<div class="right-image">
main body text
</div>
</div>

со следующим css: 

html,body{
    height: 100%
}
.left-image{
    background: transparent url('image/url.png') repeat-y top left;
    min-height: 100%; /*this alone works for making outer div extend browser & content height*/
    min-width: 960px;
    max-width: 1280px;
    margin: 0 auto;
}
.right-image{
    background:  transparent url('image/url.png') repeat-y top left;
    height: 100%; /*this only makes the div the height of its content*/
}

Это приводит к тому, что div .left-image заполняет высоту окна браузера или высоту содержимого (в зависимости от того, что больше), но div .right-image только соответствует высоте содержимого (поэтомуесли содержимое меньше окна браузера, оно не будет заполнено).

Есть ли способ обойти это?Просто используйте jQuery?

Ответы [ 9 ]

2 голосов
/ 17 февраля 2012

Это обычная проблема без простого решения. CSS3 решит эту проблему, но поддержка старых браузеров означает, что он не исчезнет в ближайшее время.

проверить

http://www.alistapart.com/articles/fauxcolumns/

и посмотрите, указывает ли это правильное направление. Вы в основном должны подделать это (искусственные столбцы) или использовать javascript, насколько я знаю.

1 голос
/ 10 февраля 2012

Как насчет height: inherit;?Он должен принимать высоту родительского тега как есть.

1 голос
/ 10 февраля 2012

Почему бы тебе не дать .left-image height:100%?В некоторых браузерах, чтобы получить 100% ширину / высоту браузера, вы должны установить каждый содержащий элемент на 100%.

1 голос
/ 27 января 2012

вы можете указать несколько фонов для вашего div обёртки вместо 2 div, как это 

.wrapper{
background: url('left.jpg'),url('right.jpg');
background-repeat: repeat-y, repeat-y;
height:100%;
}

извините, я пропустил матрицу браузера, которую вы хотите поддерживать ... ну, вот так ... попробуйте это ... это сработало для меня во всех браузерах 

<html>
    <head>
        <title></title>
        <style type="text/css">
            .left-image{
                background:grey;
                min-height:100%;
                height:100%;
                width:100%;
                position:absolute;
            }
            .right-image{
                background:#eee;
                min-height:100%;
                height:100%;
                width:50%;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="left-image">
            <div class="right-image">
                main body text
            </div>
        </div>
    </body>
</html>
1 голос
/ 27 января 2012

Возможно, вам было бы лучше использовать фоновое изображение - см. http://jsfiddle.net/ZXpyT/ для примера. Обратите внимание, что это предполагает, что содержимое тела будет иметь ширину 960 пикселей; Идея заключалась бы в создании изображения (повторяемого по вертикали), которое заменяет текущие отдельные изображения слева / справа.

1 голос
/ 23 января 2012

Одно дешевое решение, которое я использовал в прошлом, состояло в том, чтобы установить верхнее и нижнее положения на ноль. 

.left-image{ 
  background: transparent url('image/url.png') repeat-y top left; 
  /*min-height: 100%;*/
  position: absolute;
  top: 0px;
  bottom: 0px;
  min-width: 960px; 
  max-width: 1280px; 
  margin: 0 auto; 
}
.right-image{ 
  background:  transparent url('image/url.png') repeat-y top left; 
  /*height: 100%;*/ 
  position: absolute;
  top: 0px;
  bottom: 0px;
}
0 голосов
/ 07 марта 2012

Это действительно легко исправить. Добавьте это к вашему css дисплею: ​​bock;

0 голосов
/ 12 февраля 2012

Вы используете min-height на левом изображении, почему не на правом изображении тоже?

0 голосов
/ 23 января 2012

В итоге я использовал: 

$(".left-image, .right-image").height($(document).height());

(я использовал его при загрузке документа, при изменении размера окна и при выполнении вызовов ajax, которые могут расширить страницу)

Я думаю, что мойНовое правило будет состоять в том, что если что-то займет у меня больше двадцати минут, чтобы понять, используя только CSS, я пойду простым путем и использую javascript / jquery ...

...