DIVs привязаны к верхней и нижней части родительского div - PullRequest
Новая
       13

DIVs привязаны к верхней и нижней части родительского div

1 голос
/ 15 мая 2009

Это, наверное, очень дурацкий вопрос, не швыряйте в меня туфли :)

Подумайте о том, чтобы HTML был таким: 

<div class="container">
    <div class="header">
    </div>
    <div class="body">
    </div>
    <div class="footer">
    </div>
</div>

Я хочу, чтобы заголовок и нижний колонтитул были привязаны соответственно к верхней и нижней части родительского элемента, а тело легко увеличивалось, чтобы вместить все доступное пространство. Как бы выглядел CSS для этого?

РЕДАКТИРОВАТЬ: Может быть, я говорю это неправильно (я не совсем веб-разработчик :)), но мне нужно, чтобы некоторая часть div всегда была прикреплена к его нижней части. Поэтому, когда div растет, эта часть (которая может иметь фиксированный размер) будет опускаться ниже с нижним концом div. Но все это не означает прикрепление div к нижней части окна браузера.

Ответы [ 3 ]

3 голосов
/ 15 мая 2009

Если я правильно понимаю ваш вопрос, вам понадобятся некоторые действительно базовые css. 

body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }

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

Если вы хотите, чтобы нижний колонтитул был «липким», см. Здесь решение ... http://ryanfait.com/sticky-footer/

1 голос
/ 16 мая 2009

Вот, пожалуйста:

Пример страницы - нижний колонтитул прилипает вниз

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

HTML 

<header>HEADER</header>
<article>
  <p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>

CSS 

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{ 
  content:''; 
  display:block; 
  height:100px; // compensate Footer's height
} 

header{ height:50px; }

footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:100px; // height of your Footer (unfortunately it must be defined)
}
0 голосов
/ 14 апреля 2013

Попробуйте: установите position: relative в родительском div. Установите position: absolute на внутреннем div (s) и установите и свойства top и bottom; не устанавливайте высоту. Внутренний div (ы) должен растягиваться вертикально с родителем, как требуется. (К сожалению, не работает в IE6 и ниже).

...