Вертикальное выравнивание и интервал для двух делений - PullRequest
Новая
       11

Вертикальное выравнивание и интервал для двух делений

1 голос
/ 03 февраля 2011

Я застрял с проблемой вертикального выравнивания.У меня есть 2 деления.Первая имеет автоматическую высоту (зависит от размера браузера), другая имеет фиксированную высоту и расположена внизу страницы.Кроме того, второй div нуждается в поле.

Точный пример того, что я хочу сделать:

http://img199.imageshack.us/img199/9569/79106387.jpg

Я пытался: 

<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>

<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>

</body>
</html>

но я не могу дать отступ во втором div.Есть идеи?

Ответы [ 3 ]

2 голосов
/ 03 февраля 2011

попробуйте добавить это для первого div: 

<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>

и удалить margin-top из второго

1 голос
/ 03 февраля 2011

Если я правильно понимаю, вы можете просто применить к первому <div> этот стиль: top:-42px.

Если вам нужно содержимое внутри <div>, вы можете добавить еще <div> с помощью padding-top: 42px.

Как это:

Демонстрационная версия 

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px">
    <div style="padding-top:42px; color:#fff">hello</div>
</div>
0 голосов
/ 03 февраля 2011

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

...