Выровнять DIV до дна несвязанного DIV с CSS (без отношения родитель/ребенок)

Question

Согласование нижней части B с нижней частью A возможно, если DIVs не имеют отношения родитель/ребенок?

Высота обоих А и В изменяется в зависимости от того, какая страница просматривается, поэтому я не верю, что смогу это сделать с заполнением/полями/независимо.

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

What I have:    What I want: 
[ nav bar ]   [ nav bar ] 
--------- -----   --------- 
|  | | B |   |  | 
| A | -----   | A | 
|  |    |  | ----- 
|  |    |  | | B | 
---------    --------- ----- 
    ----------    ---------- 
    | content|    | content| 

Я большое время CSS Newb и я хакерство вокруг с Wordpress, чтобы заставить его делать то, что я хочу. Любая помощь будет оценена по достоинству.

Спасибо!

страница Я работаю над здесь:

http://rachelhappen.com/the-charlie-baker-sneaker/

Answer 1

Я понимаю, что вы пытаетесь сделать. Я бы предложил разместить родительский div вокруг A и B, который является относительным положением, и абсолютно позиционирует B div на дно этого контейнера. Таким образом, он всегда будет придерживаться дна.

Я протестировал следующий код, и он выглядел идеально. Скриншот прилагается к нему.

<style type="text/css"> 

* { margin:0; padding:0; } 
.container { position:relative; width:600px; height:400px; } 
.container .a { background:red; position:absolute; height:400px; width:400px; left:0; } 
.container .b { background:green; position:absolute; height:200px; width:200px; right:0; bottom:0; } 
.cl { clear:both; } 

</style> 

<div class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
</div> 

http://i.stack.imgur.com/6unHw.png

Answer 2

Основная стратегия, которая приходит на ум:

• обернуть два в контейнере DIV
'позицию: относительный'
• объявляют на контейнере, чтобы вызвать «контейнер «свойство на div (не удалось найти реальное имя этого побочного эффекта)
• Поместите свою боковую панель абсолютно, с« снизу: 0 »

Answer 3

Уверенный, вот что такое имущество vertical-align.

HTML:

<div id="container"> 
    <div id="a"> 

    </div><div id="b"> 

    </div> 
</div> 

Обратите внимание, что </div><div id="b"> соприкасались. Поскольку эти два элемента являются элементами inline-block, любое пространство в разметке создаст пространство в презентации.

CSS:

#container > div { 
    vertical-align: bottom; 
    width: 100px; 
    display: inline-block; } 
#a { 
    background: red; 
    height: 300px; } 
#b { 
    background: blue; 
    height: 100px; } 

См: http://jsfiddle.net/Wexcode/pbdHj/