Как я могу расположить содержимое между div верхнего и нижнего колонтитула? - PullRequest
Новая
       12

Как я могу расположить содержимое между div верхнего и нижнего колонтитула?

4 голосов
/ 16 октября 2008

В предыдущем вопросе я узнал, как сохранить div нижнего колонтитула в нижней части страницы. ( см. Другой вопрос )

Теперь я пытаюсь расположить содержимое по вертикали между div и верхним колонтитулом.

так что у меня есть: 

#divHeader
{
    height: 50px;
}

#divContent
{
    position:absolute;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}
<div id="divHeader">
    Header
</div>
<div id="divContent">
    Content
</div>
<div id="divFooter">
    Footer
</div>

Я попытался создать родительский div для размещения существующих 3 div и присвоить этому div вертикальное выравнивание: middle; но это никуда меня не приведет.

Ответы [ 4 ]

3 голосов
/ 16 октября 2008

В CSS2: 

html,body {height:100%;}
body {display:table;}
div {display:table-row;}
#content {
    display:table-cell;
    vertical-align:middle;
}

& 

<body>
<div>header</div>
<div id="content">content</div>
<div>footer</div>
</body>

http://codepen.io/anon/pen/doMwvJ

В старом IE (

А в последних браузерах вы можете использовать flexbox вместо .

1 голос
/ 16 октября 2008

В альтернативе, насколько я помню, вы можете использовать такие хаки, как this (подробнее здесь ).

0 голосов
/ 16 октября 2008

Может быть попробовать: 

#divHeader
{
    height: 50px;
}

#divContent
{
    /*position:absolute;*/
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}
0 голосов
/ 16 октября 2008

Вам нужно либо установить height элемента div, чтобы заполнить всю область содержимого, либо его координаты должны быть в центре. Что-то вроде top:50%; left:50%, но, конечно, это сделает div немного правее внизу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...