используйте CSS для выравнивания и заполнения - PullRequest
Новая
       38

используйте CSS для выравнивания и заполнения

0 голосов
/ 29 марта 2012

Я хочу иметь div, который содержит два других div, верхний и нижний.Верхний div должен быть выровнен по верху и иметь авто-высоту, которая зависит от содержимого верхнего div.Нижний элемент div должен заполнить пустую область родительского элемента div.

Я хотел бы выполнить выравнивание только с использованием CSS.Я не хочу рассчитывать какие-либо позиции или размеры самостоятельно.

Я попробовал следующее:

1) http://jsfiddle.net/2dUxa/

Проблема: если размер родительского элемента изменяетсяbottom-div должен переместиться на несколько пикселей вниз.

2) http://jsfiddle.net/Th4Mn/

Проблема: если родительский размер изменен, нижний div должен уменьшиться.

Решение с использованием javascript может выглядеть так:http://jsfiddle.net/2dUxa/7/ Является ли их решение без использования JavaScript?

Ответы [ 2 ]

0 голосов
/ 29 марта 2012

Используйте эту разметку ниже и css ..

Это с вашим кодом отметьте это и ниже мой код 

​<div id="main">

    <header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
    </header>

    <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
    </footer>

</div>


​#main{
width:80%;
height:300px;
position:relative;
background:#ddd;    
}
header{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
background:#aaa;    
}   
​footer{
width:100%;
height:auto;
position:absolute;    
bottom:0;
left:0;
background:#777;    
}

Проверьте здесь рабочий код ...

0 голосов
/ 29 марта 2012

Ну, как насчет этого: http://jsfiddle.net/2dUxa/3/

Я изменяю оба div на position: relative и даю основанию height: 100%.

Затем устанавливаем #main overflow: hidden;

...