CSS Абсолютное позиционирование 100% высота без отступов без JS

В следующем коде есть DIV, который нужно расположить в верхней части контейнера, другой внизу, а затем содержимое должно проходить посередине.

<div style="position:absolute; top:0; width:100%; height:40px"></div>

<div class="howto"></div>

<div style="position:absolute; bottom:0; width:100%; height:40px"></div>

Таким образом, мы не знаем высоту содержащего DIV. Как без JS может div с классом howto иметь высоту DIV контейнера за вычетом высоты div с абсолютным позиционированием вверху и внизу, чтобы содержать содержимое между этими двумя DIV.


css absolute height
person RIK    schedule 30.07.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Для того, что вы хотите выполнить, это одно из возможных решений:

@tinkerbin: http://tinkerbin.com/QsaCPgR6

HTML:

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

    <div class="howto">
      Has height set to auto. You may change that if you want to.
    </div>

    <div class="footer"></div>
</div>

CSS:

.container {
  position: relative;
  padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}

.header,
.footer {
  position: absolute;
  height: 40px;
  width: 100%;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

.howto {
  height: /*specifiy one if you wish to*/;
}
person João Paulo Macedo    schedule 30.07.2012

arrow_upward
0
arrow_downward

Насколько я знаю, нет чистого CSS-способа сделать то, что вы пытаетесь сделать без JS.

Смотрите этот предыдущий пост на SA:

Заставьте элемент div заполнить оставшееся пространство экрана по высоте

person Billy Moat    schedule 30.07.2012