Как сделать шкалу div вертикально полностью вниз?

У меня есть следующая ситуация, представленная на картинке. Серый div является родителем пурпурного и синего div. Magenta div масштабируется вертикально с содержимым. Я бы хотел, чтобы синий div всегда масштабировался до нижней части содержащего серого, div. Я искал и пробовал различные комбинации, но все это давало эффект.Как сделать шкалу div вертикально полностью вниз?

alt text

редактировать: проблема решена! Контейнер нуждается в переполнении: скрытый, а div, который я хочу растянуть на дно (синий), нуждается в дополнении-снизу: 1000 пикселей; margin-bottom: -1000; (или больше, если вам нужно)

источник

2009-06-30 Keyframe

Если вам нужна поддержка от IE6 и выше, ответ таков: вы не можете использовать только css.

Существуют различные решения действительно масштабировать DIV или просто вид, как это:

Вы можете использовать фоновое изображение для серой DIV (если все, что вам нужно, это фон, чтобы растянуть все вниз)
Вы можете использовать JavaScript, чтобы вычислить высоту серый ДИВ и применить его к синему DIV

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

Edit: Большой набивка/отрицательное решение Маржа CSS:

В статье идет о Firefox 1.5 и Safari 2, так что я не знаю, если он все еще работает, но here it is.

источник

2009-06-30 19:10:00 jeroen

Я помню это решение с большим отрицательным отрывом - я использовал это раньше, но для любви к Богу я не могу вспомнить точную информацию о реализации и не могу найти ее в Интернете! – Keyframe

JavaScript, чтобы сделать это было бы ...

<div id="yourDiv" style="background-color: Blue; width: 150px;"> 
    Hello 
</div> 

<script type="text/javascript"> 
    var div = document.getElementById('yourDiv'); 

    div.style.height = document.body.clientHeight + 'px'; 
</script>

Edit:

Проверить this ссылку для получения clientHeight в разных браузерах ...

источник

2009-06-30 19:14:03

Спасибо, но javascript сейчас не вариант. – Keyframe

Любая конкретная причина, по которой javascript не является вариантом? Если у вас есть jquery, вы можете сделать что-то вроде var greydiv = $ ("# greydivselector"). Height(); $ ("# bluedivselector"). Height (greydiv); И вы могли бы играть со смещениями. Мысли? – Acorn

Я согласен, почему JavaScript не является вариантом? Вероятно, это более простое решение. – 2009-06-30 20:33:57

Внутри вашего родительского DIV, если вы устанавливаете «float: right» на свой синий div и играете со своей высотой в процентах (высота: 100%;), я думаю, вы должны достичь того, что вы просите.

Поскольку синий div является дочерним элементом вашего серого div, максимальная высота вашего синего div не должна превышать ваш родительский div. Если я не пропущу что-то здесь ...

Кроме того, если вы плаваете свой синий div справа, обязательно поместите его перед пурпуром div в свою разметку.

Acorn

источник

2009-06-30 19:14:49 Acorn

Не забудьте указать высоту родителя, или плавающие элементы не будут «оставаться внутри» родителя. – MrChrister

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

источник

2009-06-30 19:26:00 jrglasgow

aka faux column. Я пытаюсь избежать этого, поскольку, поскольку в моей текущей настройке мне понадобится добавить еще один контейнер div ... если ничего больше не появится, я сделаю это. Благодарю. – Keyframe

Другой способ установить высоту 100% в HTML объектов используют стили:

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
    background-color:red; 
}   
</style> 
</head> 
<body> 
<div id="mydiv">aaa</div> 
</body> 
</html>

источник

2009-06-30 19:41:16 pedrofernandes

Для дочерних объектов для работы со 100% высотой родитель должен иметь высоту исправления – MrChrister

нет, если вы объявляете html и тег тела на высоте: 100% – pedrofernandes

поместите html в мое сообщение в своем браузере и увидите волшебство :) – pedrofernandes

Ключ должен иметь набор высоты на родительском контейнере. Тогда высота: 100% работает

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Divs</title> 
<style type="text/css" media="all"> 
#main { 
    height:30em; 
    width:30em; 
    background-color:#999999; 
    padding:1em 1em 0px 1em; 
} 
.inner { 
    width:5em; 
} 
#blue { 
    float:right; 
    background-color:#0000FF; 
    height:100%; 
} 
#magenta { 
    float:left; 
    background-color:magenta; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div class="inner" id="blue"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10 
    </div> 
    <div class="inner" id="magenta"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6 
    </div> 
</div> 
</body> 
</html>

источник

2009-06-30 19:45:21 MrChrister

да, но что, если я не знаю высоты родителя впереди? Я хочу, чтобы он масштабировался с левым содержимым div ... Интересно, почему в этой ситуации не будет работать минимальная высота, должен быть какой-то надзор. – Keyframe

Ах да, улов. – MrChrister

Я получил эту работу (в Chrome в любом случае), установив родителя DIV:

position: absolute;

и DIV ребенка:

height: 100%;

источник

2012-12-02 18:24:06 jLi

Как сделать шкалу div вертикально полностью вниз?

ответ

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